Using HTML form field validation

Question

I am using jQuery Mobile and am attempting to use HTML5 form field validation to perform inline form field validation. I am doing this because I really like the way that the browser reports issues in the bubble and I don't think it is very user friendly to wait until someone has completed filling out a form and then tell them what is wrong. Here is my HTML:

<form id="frmMain" action="#">
    <input type="checkbox" data-enhance="false" value="1" id="cbxFB" />
    <label for="cbxFB">
        <span class="formsubtext">Check this box to use Facebook information to help fill out this registration.  Once registered you will be able to use the Facebook login button.</span>
    </label>

    <label for="tbEmail">*Email</label><input type="email" id="tbEmail" required autofocus placeholder="example@address.com" />
    <label for="tbPassword">*Password</label><input type="password" id="tbPassword" required />
    <div class="formsubtext" style="margin-top:1px; padding-top:0px; margin-bottom:10px">Minimum of 6 characters, one capital character, and one lower case character.</div>
    <label for="tbPasswordConfirm">*Password Confirm</label><input type="password" id="tbPasswordConfirm" required />

    <label for="tbPin">*Account Pin</label><input type="password" pattern="[0-9]{4}" id="tbPin" required placeholder="####" />
    <div class="formsubtext" style="margin-top:1px; padding-top:0px; margin-bottom:10px">A four digit number that you will remember.  This value will be needed to perform sensitive tasks within the application.</div>

    <label for="tbFName">*First Name</label><input type="text" id="tbFName" required />
    <label for="tbLName">*Last Name</label><input type="text" id="tbLName" required />
    <label for="tbPhone">Phone Number</label><input type="tel" id="tbPhone" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="###-###-####" style="margin-bottom:1px; padding-bottom:0px;" />
    <div class="formsubtext" style="margin-top:1px; padding-top:0px; margin-bottom:20px;">Used at your option when you schedule an appointment with a service provider</div>

    <div style="display:none;"><label for="tbfbID">Facebook ID</label><input type="text" id="tbfbID" /></div>

    <input type="submit" id="btnMainNext" data-icon="arrow-r" data-iconpos="right" value="Next" data-theme="c" class="ui-btn-c ui-btn ui-corner-all" />
</form>

For the confirm password form field I have the following event defined:

$("#tbPasswordConfirm").on("change", function (event) {
  var password = $("#tbPassword").val();
  var passwordconfirm = $("#tbPasswordConfirm").val();

  if (password != passwordconfirm) {
    $("#tbPasswordConfirm")[0].setCustomValidity("The value entered does not match the previous password entered.");
    $("#btnMainNext").click();
  }
  else {
    $("#tbPasswordConfirm")[0].setCustomValidity("");
  }
  $(this).focus().select();
})

My problem is that when the user enters something into the field and moves to the next field the HTML form validation shows the error message for the next field (which is required). I want it to show the message for the field they just left. How do I stop the focus from moving to the next field so that the bubble message that shows up is from the field they just entered the data into? As you can see I have tried setting the focus but that does not work. Any help would be greatly appreciated.

Answer 1

You can use html tabindex attr to manipulate which element will get the focus when you click tab character. See docs to how to use it.

For example, if you make your password confirm input as tabindex="5" , you can add tabindex="6" to the <label for="tbPin"> element to prevent next input from focusing right after.

Answer 2

Solved it

Fiddle

$(function() {
  $("#tbPasswordConfirm").on("input", function(event) {
    var thisField = $("#tbPasswordConfirm")[0],
      theForm = $("#frmMain")[0],
      password = $("#tbPassword").val(),
      passwordconfirm = $(this).val(),
      custom = password === passwordconfirm ? "" : "The value entered does not match the previous password entered.";
    thisField.setCustomValidity(custom);
    if (!theForm.checkValidity()) theForm.reportValidity();
  });
});

Answer 3

You can stop focus from moving to the next field but you can't trigger native validation UI or error message unless you click submit button.

To stop focus from moving next field, after you set the custom validity on the field, you can use:

$('#tbPasswordConfirm').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

The blur() function will check the validity on blur and if it would be invalid, the corresponding function in bind() would set the focus back to that element.