how can force focus on first invalid input?

Question

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

Clow

Answer 1

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

Dionnadionne

@ kumar, i have no idea about select .invalid class, because i don't know what input(s) is invalid. i can check all input by querySelectorAll() and find first invalid input, but i try to find simpler solution. – Clow

jQuery won't tell whether an input is valid or invalid. See my edited answer – Dionnadionne

@kumar maybe it's my mistake, but i found some code about that:link ,and change it as i want. it's work perfect. – Clow

Hey, i find that: $("#"+document.querySelectorAll(":invalid")[1].id).focus(); it's work fine. but i don't know is it right approach or not? any idea please. – Clow

:invalid is not a valid jQuery selector but a valid css selector. It won't work in < IE10 . You might need consider reading this post – Dionnadionne

Answer 2

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.

Anemography

form.find() causes Uncaught TypeError: form.find is not a function. – Jurassic

@mrodo, Look at the commented line above it, form should be a jquery object. Javascript does not have find. If you need to do it with pure javascrpit you will need to iterate all form inputs and check their class and when you find one, break from loop. In most cases I find it easier to do stuff with jquery than pure javascript. – Anemography

Answer 3

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>

Superhighway

Answer 4

Simple vanilla javascript answer:

document.querySelector('input:invalid')

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

Complaint