Jquery Validate Plugin, Remote Validation with Custom Error Message

Question

I'm having a form with a SELECT field (college_id), which I am trying to validate. I am using the JQuery Validate Plugin and trying to use it's "remote" option.

HTML:

<form id="registration-form" ... >
.
.
<select name="college_id" id="college_id" class="required" >
//Options generated using PHP code
</select>
.
.
</form>

JAVASCRIPT:

$(document).ready(function(){
    //For triggering the validation onChange
    $('#college_id').change(function(){
        $("#college_id").removeData("previousValue");
        $("#registration-form").validate().element("#college_id");
    });

    $('#registration-form').validate({
        rules:{
            college_id:{
                remote: {
                    type: 'POST',
                    url: urls.base_url+'Representative/checkCollegeAJAX/',
                    dataType:"json",
                    data:{
                        college_id:function(){
                            return $('#college_id').val();
                        }
                    },
                    dataFilter: function(data) {
                        data=JSON.parse(data);
                        console.log(data.isError);
                        if(!data.isError) { //If no error
                            return true;
                        } else {
                            console.log("Error Message: "+data.errorMessage);
                            return "\"" + data.errorMessage + "\"";
                        }

                    }
                }
            }
        }
    });


});

As you can see above, i'm trying to display the Error message when isError==True

My PHP code returns a JSON encoded object like:

{"isError":true,"errorMessage":"Sorry!"}

In case of an error OR

{"isError":false,"errorMessage":""}

In case of No Error. (Extracted right from Fire Bug)

The problem is that no matter what the response, I keep getting "Fix this field" next to the SELECT field. Only in case there is an error, i need to get my custom message (data.errorMessage) displayed.

i believe using your own js code will be a better solution, let me know if you are interested in that, i will post some examples showing how to validate input box, select box , radio buttons with pure jquery — Aman Virk
– Aman Virk, Commented Sep 29, 2012 at 19:29
Thanks for your comment. I ended up writing my own JS Code for the Validation. I only wish that this could be possible in JQuery Validate, because it is much cleaner. — Colenso Castellino
– Colenso Castellino, Commented Oct 6, 2012 at 5:26
yeah plugins are always clean, but sometimes it's pain to understand and edit other's code... also you can create your plugin from the code your wrote and can reference to it later as well — Aman Virk
– Aman Virk, Commented Oct 6, 2012 at 12:16

Gianpaolo Di Nino · Accepted Answer · 2013-07-15 13:42:38Z

1

I faced this problem just now and the solution is returning as JSON the string you want to be showed as error.

so, if everything is fine just return true:

echo json_encode(true);

in your php/whatever ajax call.

If, instead, you have to show an error, put the string inside the answer:

echo json_encode("hey, we got something wrong here..");

If you need to localize the error message and you can't do that through your controller just pass it when you call the remote method:

data: {
    ajax: true,
    id: function() {
        return $( "#cid" ).val();
    },
    errormsg: "ERROR MSG WITH LOCALE"
},

I hope this will help someone else :)

edited Jul 15, 2013 at 13:42

answered Jul 15, 2013 at 13:29

Gianpaolo Di Nino

1,1375 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery Validate Plugin, Remote Validation with Custom Error Message

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related