HTML5 模式和 AJAX POST 必需

Question

我有一个表单，目前正在通过AJAX提交，但是我想使用内联HTML5模式验证和所需的功能。

我怎样才能实现这一点，同时仍然通过 AJAX 提交？我在这里玩过其他一些答案，但我在许多表单上使用此 AJAX 并在按钮中将数据传递给它。

我已经将简单的JS内联移动，以便更轻松地查看整个表单

<form enctype="multipart/form-data" action="/processing.php?page=vmrp" method="post" accept-charset="UTF-8" id="formvmrp">
<input type="checkbox" name="changePIN" onclick="document.getElementById('pintext').style.display = (this.checked) ? 'block' : 'none'; document.getElementById('nopintext').style.display = (this.checked) ? 'none' : 'block'; " /> Change My PIN
<div id="nopintext" style="display: block;">
<button onclick="submitForm('vmrp','uvml')">Unlock Voicemail</button>
</div>
<div id="pintext" style="display: none;">
<label for="edit-submitted-user-name">New PIN: <span class="form-required" title="This field is required.">*</span></label>
<br>PIN Must be 6 numbers<br>
<input required="required" type="password" placeholder="New 6 Digit PIN" id="edit-submitted-user-name" name="PIN" value="" pattern="[0-9]{6}" maxlength="6" size="75" title="PIN Must Contain 6 numbers!" class="form-text required" /><br>
<button onclick="submitForm('vmrp','uvml')">Change PIN</button>
</div>
<input type="hidden" name="form_id" value="uVMResetPIN" />
<input type="hidden" name="uVMPINURI" value="' . (string)$_SESSION['uVMPINURI'] . '" />
<input type="hidden" name="rmtIP" value="' . $_SERVER['REMOTE_ADDR'] . '" />
<input type="hidden" name="tz" value="' . $_SESSION['uVMtzn'] . '" />
<input type="hidden" name="user" value="' . $_SESSION['inUser'] . '" />                                                                     
</form>

Answer 1

HTML5验证仅在您的表单将被提交时才有效。如果您只是要序列化表单并通过 ajax 发送，那么 html5 验证将永远不会发生。您仍然可以随时调用表单方法checkValidity()以了解是否已填写所有必需的输入

但。。

较新的浏览器现在实现了 reportValidity() 方法，您可以随时调用该方法进行验证并显示问题所在，即。 就像用户按下提交按钮一样。这里唯一的问题是一些较旧的浏览器不支持。您添加条件检查并使用(如果可用)

function submitForm(blah,blah)
{
$yourForm = $('#formvmrp');
if (typeof $yourForm[0].reportValidity === "function") { 
if($yourForm.reportValidity())   // will evaluate to TRUE if all ok else FALSE and also show validation messages
{
// do ajax 
}
} else {
if($yourForm[0].checkValidity()) // will evaluate to TRUE if all ok else FALSE but won't show validation messages
{ 
// do ajax 
}
else {
alert('please fill all the details');
}
}
}