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

Posted 2023-05-07

【中文标题】在 jquery validate 插件上的回调函数上显示错误消息

【英文标题】：show error message on callback function on jquery validate plugin

【发布时间】：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 是自定义方法，那么您没有向我们展示该部分，并且使用与事件相同的名称是一个糟糕的选择。

【参考方案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 看到这个：***.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 响应