使用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

您可以使用html tabindex attr来操纵单击Tab字符时哪个元素将获得焦点。 请参阅文档以了解如何使用它。

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

Answer 2

解决了

小提琴

$(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

您可以停止将焦点移到下一个字段，但是除非单击提交按钮，否则您不会触发本机验证UI或错误消息。

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

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

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