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