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

Question

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

回调函数成功时 returns 1 else returns 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();
    }
});

Answer 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/

Answer 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"
        }
    }
}

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

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

show error message on callback function on jquery validate plugin

jquery

jquery-validate