Paul
Paul

Reputation: 3368

How to use jquery validation errorplacement for only one error field

I am using jQuery validation to validate a form. My form is slit up into sections. The top part of the form, which has normal inputs, the validation error messages are being placed exactly as I want them.

My issue is that a specific error label that is placed in a different section will not display. I was told to try our the errorplacement function, but I do not see how I can use this with one specific error message.

errorPlacement: function(error, element) {

}

In my code below, you will see two HTML comments. The first one is to illustrate that if I move the input there, then the error message will display. The second comment is where the input is currently and where I actually want it, but it will not display there.

The input's id is #interestHidden.

Does anyone see how I can use errorplacement for just this one error message?

See my code below

<section class="sec90">
            <h3 class="subTC">Enter your information below.</h3>
            <form action="" id="salesforce_submit" method="POST" enctype="multipart/form-data">
                <div><input id="first_name" placeholder="First Name*" class="input block" maxlength="40" name="first_name" type="text"></div>
                <div><input id="last_name" placeholder="Last Name*" class="input block" maxlength="80" name="last_name" type="text"></div>
                <div><input id="company" placeholder="Company*" class="input block" maxlength="40" name="company" type="text"></div>
                <!-- Moving it here will allow the message to display -->
        </section>
        <section class="sec90">
                <h3 class="subTC">What are you interested in?*</h3>
<!-- Moving it here, it doesn't show -->
                <div><input type="hidden" id="interestHidden" name="interestHidden" value=""></div>
                <div id="interestWrap">
                    <div class="interest">

Attempt:

errorPlacement: function(error, element) {
            if(element.attr("id") == "interestHidden") {
                error.html('#interestError');
            } else {
                //Placement for other interest Hidden
            }
        },

Updated JS:

$('#salesforce_submit').validate({
        ignore: [],
        //ignore: "",
        rules: {
            first_name: {
                required: true,
                minlength: 2
            },
            last_name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                //digits: true,
                minlength: 10,
                alphanumeric: true
            },
            zip: {
                required: true,
                digits: true,
                minlength: 5
            },
            company: {
                required: true,
                minlength: 2
            },
            interestHidden: {
                required: true,
                min: 1
            }
        },
        messages: {
            first_name: {
                required: "Please enter your first name",
                minlength: "Your first name seems a bit short, doesn't it?"
            },
            last_name: {
                required: "Please enter your last name",
                minlength: "Your last name seems a bit short, doesn't it?"
            },
            email: {
                required: "Please enter your email address",
                email: "Please enter a valid email address"
            },
            phone: {
                required: "Please enter your phone number",
                digits: "Please enter a valid phone number with only numbers",
                minlength: "Your number seems a bit short, doesn't it?"
            },
            zip: {
                required: "Please enter your zip code",
                digits: "Please enter a valid zip code with only numbers",
                minlength: "Your zip code seems a bit short, doesn't it?"
            },
            company: {
                required: "Please enter your company name",
                minlength: "Your company name seems a bit short. Please enter at least 2 characters"
            },
            interestHidden: {
                required: "Please choose at least one interest",
                min: "At least one interest needs chosen"
            }
        },
        /*errorPlacement: function(error, element) {
            if(element.attr("id") == "interestHidden") {
                error.html('#interestError');
            } else {
                //Placement for other interest Hidden
            }
        },*/
        errorPlacement: function (error, element) {
            if ($(element).attr('name') == 'interestHidden') {
               // error.insertAfter($(element).next());
               error.insertBefore(element.prev('#interestHidden'));
            } else {
                error.insertAfter(element); // <- default
            }
        },
        submitHandler: function(form) {

Upvotes: 0

Views: 549

Answers (0)

Related Questions