is there a way to force focus on first invalid input, after run a validation routine? something like this:

$("input:invalid:first").focus();

or

$("input:first:invalid").focus();

is there a way to force focus on first invalid input, after run a validation routine? something like this:

$("input:invalid:first").focus();

or

$("input:first:invalid").focus();

• javascript
• jquery
• validation
• focus

4 Answers 4

You can select your input based upon a class and then use :first filter

$('.error').filter(":first").focus()

This gives a much better performance since :first is a jQuery extension and not part of the CSS specification.Queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.

Edited: You can use jQuery plugin like jQuery Validator. Which adds a class error on invalid input, so you can capture it and change focus

This will work if you have the form selector

After calling this

form[0].checkValidity()

You can call this

//var form = $(form);
//var form = $("#formId");

form.find(":invalid").first().focus();

When checkValidity is called, browser will add style ":invalid" to fields which I'm sure you already know. because you only need the first one to focus we'll use first then focus chained

There might be better options to do same, but this is what I did.

I think not need to add input selector, that can also validate <select> element in a <form>, if you make a <select> as required and has a <option value=""></option>.

<select required>
    <option value=""></option>
</select>

document.querySelector(':invalid')

To get invalid elements list, use querySelectorAll.

docuemnt.querySelectorAll(':invalid')

To validate elements in a certain form, add formId selector.

document.querySelector('#formId :invalid')
document.querySelectorAll('#formId :invalid')

console.log(document.querySelector('#myForm1 :invalid'));
console.log(document.querySelectorAll('#myForm1 :invalid'));

<form id="myForm1">
  <fieldSet>
    <legend>Form1</legend>
    <select id="select1" required>
      <option value="" selected>- please choose -</option>
      <option value="1">A</option>
      <option value="2">B</option>
    </select>
    <input type="text" id="requiredTbx1" placeholder="Required" required/>
    <input type="text" id="notRequiredTbx1" />
  </fieldSet>
</form>
<form id="myForm2">
  <fieldSet>
    <legend>Form2</legend>
    <select id="select2" required>
      <option value="" selected>- please choose -</option>
      <option value="1">A</option>
      <option value="2">B</option>
    </select>
    <input type="text" id="requiredTbx2" placeholder="Required" required/>
    <input type="text" id="notRequiredTbx2" />
  </fieldSet>
</form>

Simple vanilla javascript answer:

document.querySelector('input:invalid')

it will match first invalid input (which is determined by required, value[, pattern] )