在 jquery validate 插件上的回调函数上显示错误消息答案

【问题标题】：show error message on callback function on jquery validate plugin在 jquery validate 插件上的回调函数上显示错误消息
【发布时间】：2021-10-10 06:50:35
【问题描述】：

我在这里检查输入是否已经在数据库中。我得到了回调函数响应，但如果函数为假，它不会显示错误。我想像其他规则一样打印该错误消息。其他规则错误信息显示正确。

回调函数成功返回1，否则返回0

     //html 
   <form action="" method="post" id="addGroup" name="addGroup">
                <div class="form-group">
                    <label for="input-1">Name*</label>
                    <input type="text" class="form-control"  name="Groupname" id="Groupname" placeholder="Enter Group Name" required>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-light px-5"><i class="icon-lock"></i> Add Group</button>
                    <a href="<?php echo base_url('admin/groups'); ?>"><button type="button" class="btn btn-light px-5"><i class="icon-lock"></i> Cancel</button></a>
                </div>
            </form>
  // jquery validation

   $( "#addGroup" ).validate({
    errorClass: "invalid",
    validClass: "success",
    rules: {
        Groupname: {
            required: true,
            minlength: 5,
            onfocusout:function( element, event ) {
                if (element.value != '' && element.value.length > 4) {
                    $.ajax({
                        url : '<?php echo base_url("admin/checkGroupName"); ?>',
                        type : 'post',
                        data : {"groupName":element.value},
                        success: function(data){
                            if (data)
                                return true;
                            else {
                                return false;
                            }
                        }
                    });
                }
            }
        }
    },
    messages: {
        Groupname: {
            required: "Please provide a valid roup Name",
            minlength: "Your group name must be at least 5 characters long",
            onfocusout:"Group Name already exist"
        }
    },
    submitHandler: function(form) {
        form.submit();
    }
});

【问题讨论】：

也显示您的 html。甚至是可执行代码
@AlirezaAhmadi 我添加了 html 部分。
在success 属性之后添加,async: false。像这样：success: function (data) {if (data)return true;else {return false;}},async: false。告诉我发生了什么
@AlirezaAhmadi 什么都没发生
当您发明不存在的方法时，什么都不会发生。 onfocusout 是一个验证触发器，它不是这个插件内置的规则/方法。你不能把它放在rules 里面并期待任何事情发生。如果onfocusout 是自定义方法，那么您没有向我们展示该部分，并且使用与事件相同的名称是一个糟糕的选择。

标签： jquery jquery-validate

【解决方案1】：

验证已经完成，但您的 ajax 尚未完成，因此您需要将 async 属性设置为 false。见this

onfocusout: function (element, event) {
    if (element.value != '' && element.value.length > 4) {
        $.ajax({
            url: '<?php echo base_url("admin/checkGroupName"); ?>',
            type: 'post',
            data: { "groupName": element.value },
            success: function (data) {
                if (data)
                    return true;
                else
                    return false;
            },
            async: false
        });
    }
}

但您也可以使用remote 选项。见官方文档：https://jqueryvalidation.org/remote-method/

【讨论】：

我得到了 ajax 结果我没有收到错误消息如何添加错误消息，如 required 和 minlength 规则
@SandhyaSrishti 看到这个：stackoverflow.com/questions/23394998/…
不带async 还是带async？
我两次都得到了结果。但我们应该使用异步，因为你说它非常重要
仅供参考 - onfocusout 是一个事件触发器，是.validate 的一个选项，是rules 的一个兄弟。它本身不是规则，因此不能在 rules 声明中。

【解决方案2】：

       $.validator.methods.checkGroupName = function( value, element ) {
    if (element.value != '' && element.value.length > 4) {
        $.ajax({
            url : '<?php echo base_url("admin/checkGroupName"); ?>',
            type : 'post',
            data : {"groupName":element.value},
            success: function(data){
                if (data == 1){
                    return true;
                }
                else {
                    return false;
                }
            },
            async: false
        });
    }
} 

       $( "#addGroup" ).validate({
    rules: {
        Groupname: {
            required: true,
            minlength: 5,
            checkGroupName : true,
        }
    },
    messages: {
        Groupname: {
            required: "Please provide a valid Group Name",
            minlength: "Your group name must be at least 5 characters long",
            checkGroupName:"Group Name already exist"
        }
    }
}

这是我的答案，我将回调函数更改为验证器方法，它按预期提供输出

【讨论】：

我认为async 非常重要，因为您需要验证等待ajax 响应