Custom Error Message Text with Jquery Validate Plugin

Question

Need to copy the Custom error message text from a span where text is coming from CMS. It is basically a need to show a custom localized error message.

Code works when you submit the form but as soon as you click outside, the default message replace the custom one.

http://jsfiddle.net/2nV5u/16/

HTML

<form name="form-core" id="form-core" method="post" action="" role="search"  novalidate="novalidate">
      <label for="keywords">Hello</label>
      <input type="text" id="keyword" name="keyword" class="required" />
      <span class="error-message-required">Ce champ est obligatoire</span>
      <input type="submit" /><input class="cancel" type="submit" value="Reset" />         
</form>

JS

 $('#form-core').validate({
            debug: false,
            onfocusout: function (element) { jQuery(element).valid() },
            errorElement: "div",
            errorPlacement: function (error, element) {
                jQuery('div[for=' + error.attr('for') + ']').remove();
                    error.text($(element).next('.error-message-required').text());
                    error.insertBefore(element);
                }                
        });

tried that but then when you enter a character and remove it again. Dafult error message text again comes into picture — Lokesh Yadav, Apr 11 '13 at 11:20
@AmitAgrawal, there is nothing wrong with `jQuery(element).valid()` inside his `onfocusout` callback function. He's merely triggering instant validation on focus out before the submit button activates it. — Sparky, Apr 11 '13 at 14:30
http://stackoverflow.com/questions/16681406/jquery-validate-custom-messages — VKPRO, Dec 30 '13 at 18:17

Sparky · Accepted Answer · 2013-04-11T16:04:10.280

It's not working the way you expect because the errorPlacement callback function is not fired on every error. It's only fired on the first occurrence of the error and then the plugin automatically shows/hides the new error element that it created by itself.

1) I think you're making things more complicated than they need to be. Simply specify your custom error message inside the .validate() initialization function. Remove the <span></span> from your HTML/CMS and let the plugin handle this the way it was designed.

messages: {
    keyword: {
        required: "Ce champ est obligatoire"
    }
}

2) Again, let the plugin do its job. Change your errorPlacement callback function to this:

errorPlacement: function (error, element) {
    error.insertBefore(element);
}

3) Change your reset button to type="reset", so that it's not submitting the form:

<input class="cancel" type="reset" value="Reset" />

Working DEMO: http://jsfiddle.net/wQaYw/

jQuery:

$(document).ready(function () {

    $('#form-core').validate({
        messages: {
            keyword: {
                required: "Ce champ est obligatoire"
            }
        },
        onfocusout: function (element) {
            jQuery(element).valid()
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            error.insertBefore(element);
        }
    });

});

EDIT:

If, for whatever reason, you cannot remove the span from your CMS and declare the custom messages inside of .validate(), you have another option.

Use the built-in rules('add') method to dynamically alter the default messages for every input[type="text"], with a required rule, on the entire form as follows. (However, with this method, you must supply a custom message for each of these elements as this will over-ride all of them.)

$('#form-core input[type="text"]').each(function () {
    $(this).rules('add', {
        messages: {
            required: $(this).next('.error-message-required').text()
        }
    });
});

after this...

$('#form-core').validate({
    onfocusout: function (element) {
        jQuery(element).valid()
    },
    errorElement: "div",
    errorPlacement: function (error, element) {
        error.insertBefore(element);
    }
});

Working DEMO: http://jsfiddle.net/6Vzdz/

thanks a ton @Sparky ! built-in rules options is looking like a perfect fill for my problem. What i also tried is to capture the validate().settings object and extend the messages object on the fly. Will provid more updates after finishing the project tasks. — Lokesh Yadav, Apr 12 '13 at 11:03

Custom Error Message Text with Jquery Validate Plugin

1 Answers1