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

这很酷，但我只想验证单个字段（在这种情况下，文本输入“输入[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>

单击提交按钮时，jQuery ValidationEngine会将checkProviderNameExists请求提交给服务器，并根据结果显示正确/不正确的提示。但是，如果验证通过，我希望能够在那时提交表单。这可能吗？ 基本上我需要一个回调函数来进行字段验证，因此我可以采取适当的操作，具体取决于表单是否有效。

为了完整起见，我在实现自定义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验证需要回调

3 个答案: