JQuery validation form Remote rule, success message

Question

I use jquery validation for my register form, it works fine, but I have a problem. I check if the letter exists, if the letter exists, I get an error message. Now I would like to edit this, so that if the letter is free to use. The error message will change to: This message 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 warning works, but this message should appear on the label where there are errors. Is it possible?

Answer 1

@Ruub: The deleted message must be a function, and the deleted one in the rule is just a URL to 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()) } }, }, }); 

On the server side (including / check_email.php):

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

Answer 2

I found a solution to our problem, spent a day on an existing solution, but no one satisfied me and didn’t recognize a bit of jqvalidator source code. I found it easy to understand.

  $("#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 fine!

This code has been tested with jqvalidation 1.14.0

Hope I help someone.

Answer 3

You can use the success option.

If specified, an error label is displayed to indicate the actual item. If a string is specified, it is added as a class to the label. If a function is specified, it is called with a label (as a jQuery object) and verified input (as a DOM element). The label can be used to add text like "ok!".

Example in the document: add the class "valid" to the actual elements created using 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 reading the following:. validate ()

Answer 4

Replace the code below with your full function:

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

Please check this out, this will help.