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 验证仅在您的表单将获得 submitted.If 时才有效，您只需序列化表单并通过 ajax 发送，然后 html5 验证将从来没有 occur.Still 你随时调用 checkValidity() 表单方法来知道是否所有必需的输入都已填写

但是..

较新的浏览器现在已经实现了 reportValidity() 方法，您可以随时调用该方法来验证并显示错误，即。就像用户按下提交 button.Only 一样，这里的问题是某些较旧的浏览器不支持。您添加条件检查并在可用时使用

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');
       }
    }
}

HTML5 模式并且 AJAX 需要 POST

HTML5 Pattern and Required with AJAX POST

php

validation

ajax

ajaxform