使用 HTML 表单字段验证

Question

我正在使用 jQuery Mobile 并尝试使用 HTML5 表单字段验证来执行内联表单字段验证。我这样做是因为我真的很喜欢浏览器在气泡中报告问题的方式，而且我认为等到有人填写完表格然后告诉他们出了什么问题，这对用户来说并不友好。这是我的 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>

对于确认密码表单字段，我定义了以下事件：

$("#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();
})

我的问题是，当用户在字段中输入内容并移至下一个字段时，HTML 表单验证会显示下一个字段的错误消息（这是必需的）。我希望它显示他们刚刚离开的字段的消息。如何阻止焦点移动到下一个字段，以便显示的气泡消息来自他们刚刚输入数据的字段？如您所见，我尝试设置焦点，但这不起作用。任何帮助将不胜感激。

Answer 1

您可以阻止焦点移动到下一个字段，但除非您单击提交按钮，否则您无法触发原生验证 UI 或错误消息。

要阻止焦点移动下一个字段，在字段上设置自定义有效性后，您可以使用：

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

blur() 函数将检查模糊的有效性，如果无效，bind() 中的相应函数会将焦点设置回该元素。

Answer 2

解决了

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

您可以使用 html tabindex attr 来操作当您单击制表符时哪个元素将获得焦点。请参阅docs 了解如何使用它。

例如，如果您将密码确认输入为tabindex="5"，则可以将tabindex="6" 添加到<label for="tbPin"> 元素中，以防止下一个输入紧随其后。