CODEWITHSUNDEEP
jqueryvalidationselectjquery-validate
jayseeg
jayseeg

Reputation: 49

jQuery validation plugin not validating a select box

I'm having trouble getting jquery.validation.js to validate a select box. It is working on the text inputs, but it does not display an error message for the select. If I fulfill validation on the text inputs, it submits. Does anyone see what I'm missing here?

<form name="consumerRegistration" id="consumerRegistration" action="" method="post">
    <label for="name" class="baseline-10">Full Name</label>
    <input type="text" name="name" id="name" class="required" placeholder="John Doe" min-length="2"/>
    <label for="email" class="baseline-10">Email</label>
    <input type="text" name="email" id="email" class="required email" placeholder="[email protected]"/>
    <label for="company" class="baseline-10">Company</label>
    <input type="text" name="company" id="company" placeholder="ie. Yahoo"/>
    <select name="country" id="country" class="required" required="required">
        <option selected="" val="" disabled="disabled">Country</option>
        <option val="United States">United States</option>
        <option val="Canada">Canada</option>
    </select>
    <a href="javascript:document.void(1);" title="Register" class="cta"><span>Register</span></a>


(function($){
if($('form#consumerRegistration').length){
    $('input').placeholder();
    $('form#consumerRegistration').find('a').on('click', function(e){
        e.preventDefault();
        if($('form#consumerRegistration').valid()){
            $('form#consumerRegistration').submit();
        } else {
            return false;
        }
    });
}
})(jQuery);

If I've missed a solution somewhere else in the site, I swear I've looked thouroughly. :)

The plugin is from http://bassistance.de/jquery-plugins/jquery-plugin-validation/ .

Upvotes: 1

Views: 7681

Answers (2)

Ankit Sharma
Ankit Sharma

Reputation: 1

Jquery Validation Plugin requires the first option of select to be blank to validate them. Ex: your select box should look like Following :

<select name="country" id="country" class="required">
        <option></option>
        <option val="United States">United States</option>
        <option val="Canada">Canada</option>
</select>

Upvotes: 0

Ryley
Ryley

Reputation: 21216

OK, your problem is that you're not really using jquery validate correctly. What you need to do is more like this:

First, setup the validation on document.ready, if you don't do this, it doesn't validate the form any other way:

$('form#consumerRegistration').validate(...//options here

Next, create a click event for your a elements that just submits the form (validate will then do its thing)

$('form#consumerRegistration').find('a').on('click', function(e){
    $('form#consumerRegistration').submit();
});

Finally, the reason your select isn't being dealt with correctly is that you haven't specified its attributes correctly. Simply, val is not the right attribute for your options, value is. So just change that in all the options:

    <option selected="" value="" disabled="disabled">Country</option>
    <option value="United States">United States</option>
    <option value="Canada">Canada</option>

Here it is working: http://jsfiddle.net/ryleyb/TTpSB/

Upvotes: 2

Related Questions