jQuery Validation Form Remote rule, success message

Question

I am using jquery validation for my register form, it works perfectly but I'm running into a problem. I check if the email exists, if an email does exists I'm receiving an error message. Now I would like to edit this, so, if the email is free to use. The error message will change to: This email is free to use.

$(document).ready(function(){
    $("#registratieform").validate({
        rules: {
            email: {
                required: true,
                email: true,
                remote: {
                    url: "includes/check_email.php",
                    type: "post",
                    complete: function(data){
                        if( data.responseText == "false" ) {
                            alert("Free");
                          }
                     }
                },
            },
        },

        messages: {
            email: {
                required: "This field is required",
                email: "Please enter a valid email address",
                remote: jQuery.format("{0} is already taken")
            },
        },
    });
});

The Alert works, but this message has to appear in the label where the errors are. Is this possible?

Solution 1

@Ruub: The remote message should be a function, and the remote in rule just an url for check Example:

$("#registratieform").validate({
    rules: {
        email: {
            required: true,
            email: true,
            remote: "includes/check_email.php"                    
        }
    },
    messages: {
        email: {
            required: "This field is required",
            email: "Please enter a valid email address",
            remote: function() { return $.validator.format("{0} is already taken", $("#email").val()) }
        },
    },
});

In server side (includes/check_email.php):

if (!isValidEmail($_REQUEST['email'])) {
        echo "false";
        exit;
    }

Solution 2

You can use success option.

If specified, the error label is displayed to show a valid element. If a String is given, it is added as a class to the label. If a Function is given, it is called with the label (as a jQuery object) and the validated input (as a DOM element). The label can be used to add a text like “ok!”.

The example in the doc: Add a class “valid” to valid elements, styled via CSS, and add the text “Ok!”.

$("#myform").validate({
    success: function(label) {
        label.addClass("valid").text("Ok!")
    },
    submitHandler: function() { alert("Submitted!") }
});

In your code:

$(document).ready(function(){
    $("#registratieform").validate({
        rules: {
            email: {
                required: true,
                email: true,
                remote: {
                    url: "includes/check_email.php",
                    type: "post",
                    complete: function(data){
                        if( data.responseText == "false" ) {
                            alert("Free");
                          }
                     }
                },
            },
        },

        messages: {
            email: {
                required: "This field is required",
                email: "Please enter a valid email address",
                remote: jQuery.format("{0} is already taken")
            },
        },

        success: function(e) {
            // Remove error message
            // Add success message
        },
    });
});

I recommended read this: .validate()

Solution 3

I`v found solution for our problem, a spend a day to all existed solution but noone satisfied me and learn a bit source code of jqvalidator I found that it is easy to realize it

   $("#myform").validate({
       rules: {
            somealiasname: {
                required: true,
                remote: {
                    url: "www.callthisurl.com/remote",
                    type: "GET",
                    success: function (data) {// Here we got an array of elements for example
                        var result = true,
                            validator = $("#myform").data("validator"), //here we get the validator for current form. We shure that validator is got because during initialization step the form had stored validator once.
                            element = $("#myform").find("input[name=somealiasname]"),
                            currentAlias = element.val(),
                            previous, errors, message, submitted;

                        element = element[0];
                        previous = validator.previousValue(element); // here we get the cached value of element in jqvalidation system

                        data.forEach(function (it) {//here we check if all alias is uniq for example
                            result = !result ? false : it.alias != currentAlias;
                        });

                        validator.settings.messages[element.name].remote = previous.originalMessage; // this code I found in the source code of validator (line 1339)

                        if (result) {
                            submitted = validator.formSubmitted;
                            validator.prepareElement(element);
                            validator.formSubmitted = submitted;
                            validator.successList.push(element);
                            delete validator.invalid[element.name];
                            validator.showErrors();
                        } else {
                            errors = {};
                            message = validator.defaultMessage(element, "remote");
                            errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
                            validator.invalid[element.name] = true;
                            validator.showErrors(errors);
                        }

                        previous.valid = result;
                        validator.stopRequest(element, result);
                    }.bind(this)
                }
            }
        }

```

tadam - everything is perfectly!

This code has been tested with jqvalidation 1.14.0

I hope, I could help somebody

Solution 4

Replace below code with your complete function :

dataFilter: function (data) {
                        return 'false';// If email not exist
                        return 'true';// If email exist ( Display message on return true )
                    }

Please check this it will be help.

View more solutions