I have a form with some input fields. I am using the tabStrip KendoUI widget to group the input fields. I am using the Kendo validator and when the form is submitted some error messages are triggered. The problem is that if the input field with the error message is on a different tab then the currently selected the user cannot see it. What I want to acplish is when the form is validated the tab containing the first input field with error message to be selected and the focus to be on that input field. Here is some sample code:

<script type="text/javascript">
    $("#tabStrip").kendoTabStrip();
</script>

<div id="tabStrip">
    <ul>
        <li class="k-state-active">Master Info</li>
        <li>Developer Info</li>
    </ul>
     <div id="tabStrip-1">
         <div>
            <label for="folderName" class="required">Folder Name:</label>
            <input type="text" id="folderName" name="folderName"  required />
            <span class="k-invalid-msg" data-for="folderName"></span>
        </div>
        <div>
            <label for="afk">Afk:</label>
            <input type="text" id="afk" name="afk" data-bind = "value: Afk" />
        </div>
     </div>
     <div id="tabStrip-2">
         <div>
            <label for="updateFolder" class="required">Update Folder:</label>
            <input type="text" id="Text1" name="updateFolder" class="k-input k-invalid" required />
            <span class="k-invalid-msg" data-for="updateFolder"></span>
        </div>
        <div>
            <label for="age">Age:</label>
            <input type="text" id="age" name="age" class="k-input k-invalid" data-bind = "value: Age" />
        </div>
     </div>
</div>

After submit the form validation is triggered and I am finding the first tab containing an input with error message. But setting the focus on the first element with error message does not work. I suspect that the input element is not loaded yet after the submit. Here is the js code:

if (!omega.validatable.validate()) {
            //Select all the tab strips
            tabs = $("#tabStrip").find('div[id^=tabStrip]');

            var tabStrip = $("#tabStrip").data("kendoTabStrip");
            //Loop through the tab strips looking for an input containing the error class
            for (var i = 0; i < tabs.length; i += 1) {
                if ($(tabs[i]).find('input[class~=k-invalid]').length > 0) {

                    tabStrip.select(i);

                    // Set focus on the first input element with error message
                    $('input.k-input.k-invalid:first').focus();
                    break;
                }
            }
            return false;
        }

using

 $(document).ready(function () {
    $('input.k-input.k-invalid:first').focus();
 });

does not help at this point either. Please help. Thank You!

I have a form with some input fields. I am using the tabStrip KendoUI widget to group the input fields. I am using the Kendo validator and when the form is submitted some error messages are triggered. The problem is that if the input field with the error message is on a different tab then the currently selected the user cannot see it. What I want to acplish is when the form is validated the tab containing the first input field with error message to be selected and the focus to be on that input field. Here is some sample code:

<script type="text/javascript">
    $("#tabStrip").kendoTabStrip();
</script>

<div id="tabStrip">
    <ul>
        <li class="k-state-active">Master Info</li>
        <li>Developer Info</li>
    </ul>
     <div id="tabStrip-1">
         <div>
            <label for="folderName" class="required">Folder Name:</label>
            <input type="text" id="folderName" name="folderName"  required />
            <span class="k-invalid-msg" data-for="folderName"></span>
        </div>
        <div>
            <label for="afk">Afk:</label>
            <input type="text" id="afk" name="afk" data-bind = "value: Afk" />
        </div>
     </div>
     <div id="tabStrip-2">
         <div>
            <label for="updateFolder" class="required">Update Folder:</label>
            <input type="text" id="Text1" name="updateFolder" class="k-input k-invalid" required />
            <span class="k-invalid-msg" data-for="updateFolder"></span>
        </div>
        <div>
            <label for="age">Age:</label>
            <input type="text" id="age" name="age" class="k-input k-invalid" data-bind = "value: Age" />
        </div>
     </div>
</div>

After submit the form validation is triggered and I am finding the first tab containing an input with error message. But setting the focus on the first element with error message does not work. I suspect that the input element is not loaded yet after the submit. Here is the js code:

if (!omega.validatable.validate()) {
            //Select all the tab strips
            tabs = $("#tabStrip").find('div[id^=tabStrip]');

            var tabStrip = $("#tabStrip").data("kendoTabStrip");
            //Loop through the tab strips looking for an input containing the error class
            for (var i = 0; i < tabs.length; i += 1) {
                if ($(tabs[i]).find('input[class~=k-invalid]').length > 0) {

                    tabStrip.select(i);

                    // Set focus on the first input element with error message
                    $('input.k-input.k-invalid:first').focus();
                    break;
                }
            }
            return false;
        }

using

 $(document).ready(function () {
    $('input.k-input.k-invalid:first').focus();
 });

does not help at this point either. Please help. Thank You!

• javascript
• jquery
• kendo-ui

• a fiddle with this plugin in use could be helpful :) – AbstractChaos Commented Jun 15, 2012 at 11:14

4 Answers 4

maybe you need to unfocus other element first like:

$("input").blur(`);

than

$('input.k-input.k-invalid:first').focus();

this should listen to any submit that occurs

$(body).on('submit',null,function() {
    $('input.k-input.k-invalid:first').focus();
});

or for more specific use.

$('#yourForm').submit(function() {
   $('input.k-input.k-invalid:first').focus();
});

Also wrap your inputs in <form></form> orsubmit wont trigger.

Update

Since your form is spread across separate tabs you will need to wrap the entire thing in form tags.

<form id="yourForm" action="submit.php"> //I will discuss action below    
<div id="tabStrip">
        <ul>
            <li class="k-state-active">Master Info</li>
            <li>Developer Info</li>
        </ul>
         <div id="tabStrip-1">
             <div>
                <label for="folderName" class="required">Folder Name:</label>
                <input type="text" id="folderName" name="folderName"  required />
                <span class="k-invalid-msg" data-for="folderName"></span>
            </div>
            <div>
                <label for="afk">Afk:</label>
                <input type="text" id="afk" name="afk" data-bind = "value: Afk" />
            </div>
         </div>
         <div id="tabStrip-2">
             <div>
                <label for="updateFolder" class="required">Update Folder:</label>
                <input type="text" id="Text1" name="updateFolder" class="k-input k-invalid" required />
                <span class="k-invalid-msg" data-for="updateFolder"></span>
            </div>
            <div>
                <label for="age">Age:</label>
                <input type="text" id="age" name="age" class="k-input k-invalid" data-bind = "value: Age" />
            </div>
         </div>
    </div> 
</form>

This will react to the form button being pressed and ensure the data from the textbox is kept too.

If this static post (ie. your php will return a new page then the action attribute is needed however you could also make it a ajax post which would mean you neva leave the page for example.

$('#yourForm').submit(function() {
   $.post('submit.php',$(this).serialize(),function() {
       $('input.k-input.k-invalid:first').focus();
   });

   e.preventDefault(); // stop it from executing the action
});

now it will post the form as normal and on return set the focus on the input... however since they are in different tabs you may need to also switch back to the text box tab.

Try this

function pageload() {
    $('#ControlName').focus();
}

There is actually a very simple solution for focusing. Go to input element and type "autofocus". And thats it.

<input type="text" id="folderName" name="folderName" autofocus required>