show error message on callback function on jquery validate plugin

Question

Here I am checking the input is already in db or not. I got the call back function response but it doesn't showing error if the function is false. I want to print that error message like other rules. The other rules error messages showing correctly.

On success of call back function 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();
    }
});

Add `,async: false` after `success` attribute. like this: `success: function (data) {if (data)return true;else {return false;}},async: false`. And tell me what happend — Alireza Ahmadi, Aug 05 '21 at 09:16
Nothing is going to happen when you invent methods that do not exist. `onfocusout` is a validation trigger, it's not a rule/method built into this plugin. You cannot put it inside of `rules` and expect anything to happen. If `onfocusout` is a custom method, then you failed to show us that part, and it's poor choice to use the same name as the event. — Sparky, Aug 07 '21 at 22:46

Alireza Ahmadi · Answer 1 · 2021-08-08T03:00:27.777

1

The validation is already finished working but your ajax does not finish yet, so you will need to set async attribute to false. See 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
        });
    }
}

But you also can use remote option. See official documentation: https://jqueryvalidation.org/remote-method/

edited Aug 08 '21 at 03:00

answered Aug 05 '21 at 09:21

Alireza Ahmadi

8,579
5
15
42

1

i got ajax result am not getting the error message how can i add error message like required and minlength rule – Sandhya Srishti Aug 05 '21 at 09:32
2

@SandhyaSrishti see this: https://stackoverflow.com/questions/23394998/set-custom-validator-message-using-focusout – Alireza Ahmadi Aug 05 '21 at 09:43
1

Without `async` or with `async`? – Alireza Ahmadi Aug 05 '21 at 09:53
2

i got result both time. but we should use async as u said it is very important – Sandhya Srishti Aug 05 '21 at 10:02
2

FYI - `onfocusout` is an event trigger, an option of `.validate`, and a ***sibling*** of `rules`. It's not a rule by itself and therefore cannot be inside of the `rules` declaration. – Sparky Aug 07 '21 at 22:49

score 0 · Accepted Answer · answered Aug 05 '21 at 09:45

       $.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"
        }
    }
}

Here is my answer i changed callback function to validator method it gives output as expected

I think the `async` is very important because you need to your validation wait for ajax response — Alireza Ahmadi, Aug 05 '21 at 09:55

show error message on callback function on jquery validate plugin

2 Answers2