jQuery validationEngine Ajax 表单字段验证需要回调

Question

如果您使用 jQuery ValidationEngine 来验证带有 AJAX 的表单，您可以通过回调直接处理前后：

jQuery("#testForm").validationEngine('attach', 
{
    promptPosition : "bottomLeft", 
    validationEventTrigger : "submit", 
    ajaxFormValidation: true,
    onBeforeAjaxFormValidation: function() {
        alert('before');
    },
    onAjaxFormComplete : function(status, form, errors, options) {
        alert('after');
    }
});

这很酷，但我只想验证一个单独的字段（在本例中，文本输入“input[name='name']”） :

<script>
$("#testBtn").click(function() {
    var resp = $("#testForm").validationEngine("validate");
});
</script>
<form onsubmit="return false;" 
    onclick="$('#testForm').validationEngine('hide')" 
    name="testForm" 
    id="testForm" 
    action="" method="POST">
    <input type="hidden" name="providerId" value="0" />
    <input name="name" value="Default Provider" class="validate[required, ajax[checkProviderNameExists]]" />
    <button id="testBtn">Submit</button>
</form>

点击提交按钮后，jQueryValidationEngine会向服务器提交checkProviderNameExists请求，并根据结果显示correct/incorrect提示。但是，如果验证通过，我希望能够在此时提交表单。这可能吗？ 基本上我需要一个用于字段验证的回调函数，这样我就可以根据表单是否验证采取适当的措施。

为了完整起见，这里是我对自定义 ajax 验证器的实现：

"checkProviderNameExists" : {
    "url": "/settings/checkprovidernameexists",
    "extraDataDynamic": "providerId",
    "alertText": "* This provider name already exists",
    "alertTextLoad": "Checking name..."
}

Answer 1

在单个字段上设置 AJAX 验证器仅在运行时执行。为了完成我想要的，我必须使用 ajax 来验证整个表单，并且在那个特定的 ajax 处理程序中对各个字段进行验证。

Answer 2

我找到的简单解决方案是

function validateUserName(field, rules, i, options){
if($('#mName').val()){
    var isValidName = true;
    $.ajax(
        {
            url: "/yourroute/"+$('#mName').val(), 
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(result){
                isValidName =  (result == 1) ? false : true;
            },
            async: false
        });
    if(isValidName==false){
        console.log("False");
        return 'Name is already taken';
    }
}

}

并在 html

data-validation-engine="validate[required,funcCall[validateUserName]"

Answer 3

类似于之前的解决方案

<input id='r_email' name="r_email" type="email" class="validate[required,custom[email],funcCall[validate_email]]" placeholder="Please enter your valid email address">


<script>
  function validate_email(field, rules, i, options) {       
    response = $.ajax({
        url: '/php/chkEmail.php?pr_email=' + $('#r_email').val(), 
        type: 'GET',
        async: false
    }).responseText;
    
    if (response != 'available') 
        return "email is taken. Please try different email";        
}
</script>

jQuery validationEngine Ajax 表单字段验证需要回调

jQuery validationEngine Ajax validation for form fields needs callback

ajax

jquery

jquery-validation-engine