CODEWITHSUNDEEP
javascriptjqueryvalidationfocus
A.Pourhadi
A.Pourhadi

Reputation: 97

how can force focus on first invalid input?

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

Upvotes: 6

Views: 11172

Answers (4)

Jun Yu
Jun Yu

Reputation: 424

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>

Upvotes: 2

Mechanic
Mechanic

Reputation: 5380

Simple vanilla javascript answer:

document.querySelector('input:invalid')

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

Upvotes: 1

AaA
AaA

Reputation: 3694

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.

Upvotes: 5

Saravana Kumar
Saravana Kumar

Reputation: 836

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

Upvotes: 6

Related Questions