CODEWITHSUNDEEP
javascriptjquery
Gopi Nathan
Gopi Nathan

Reputation: 123

how to add custom error replacment messages in jquery validaiton plugin?

I would like to add custom error replacement using jquery validation plugin (http://jqueryvalidation.org/documentation/) I would like to do custom error replacement like click here 

$(function() {
    //simple example 1
    //click event for first button 

    $("#form1").validate({
        errorPlacement: function(error, element) {
            if (element.attr("name") == "business_email" ) {
                $("#bus_email").css('color',"#f42156");
                $("#busp_email").removeClass("field_validation_error hidden");
                $("#busp_email").addClass("field_validation_error");
            }
        },        
        rules: {
            business_email: "required"
        },
        messages: {
            business_email: "Please enter your firstname"
        }       
    });
});

https://jsfiddle.net/fr0dc2es/7/

Upvotes: 0

Views: 56

Answers (2)

Etienne Prothon
Etienne Prothon

Reputation: 1082

With this code you can get custom replacement message and act on #bus_email:

$(function() {
    //simple example 1
    //click event for first button 

    $("#form1").validate({
        rules: {
            business_email: "required"
        },
        messages: {
            business_email: "Please enter your firstname"
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "business_email") {
                $("#bus_email").css('color',"#f42156");
                $("#busp_email").removeClass("hidden");
                $("#busp_email").html(error);
            } else {
                $("#busp_email").addClass("hidden");
                $("#busp_email").html();
                error.insertAfter(element);
            }
          }
    });
});

JQueryValidation Documentation

Upvotes: 1

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34244

In your JSFiddle, errorPlacement function is being called and jQueryVal is working properly.

However,

  1. Your #busp_email is shown but empty.

  2. Your script logic is incorrect. Why do you remove a class, and add this class right after it? Why don't you hide it?

You don't need to check for every value in errorPlacement. It is not how it works. You shouldn't define a error placement for every input in a predefined error box - you should define a common placement logics by creating dynamic error messages after an input or in a specified place; or by appending an error to the specified alert; but definitely not by checking for every item.

Why default validation error placement is not suitable for you? What do you want to change? Describe it and I will try to help you - now you just provide an invalid code without any explanations.

Upvotes: 0

Related Questions