how can force focus on first invalid input?

Viewed 7954

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();
4 Answers

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.

Simple vanilla javascript answer:

document.querySelector('input:invalid')

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

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>

Related