使用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来操作哪个元素将在您点击选项卡字符时获得焦点。请参阅docs以了解如何使用它。

例如，如果你让你的密码确认输入作为tabindex="5"，您可以添加tabindex="6"到<label for="tbPin">元素，以防止后立即聚焦下一个输入。

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

您可以从移动到下一个场停止焦点，但除非你点击提交按钮，也无法触发本地验证UI或错误消息。

要移动下一个视场光阑的焦点，您可以设置自定义的有效性在球场上后，您可以使用：

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

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