jQuery validation plugin not validating a select box

Question

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/ .

Well, I can't tell what's wrong without seeing the code from jquery.validation.js. So maybe you should add that to your question. — Igor Azevedo
– Igor Azevedo, Commented Feb 28, 2012 at 0:19
Sorry about that, I've added a link to the plugin homepage, but I didn't include the code here because it seemed like 1100 lines might be overkill. — jayseeg
– jayseeg, Commented Feb 28, 2012 at 0:33

Ryley · Accepted Answer · 2012-02-28 16:14:10Z

2

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/

answered Feb 28, 2012 at 16:14

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jayseeg Over a year ago

I'm smacking myself right now, I can't beleive I effed with this so long and didn't catch the mis named attribute. Thanks for figuring this out, I'll give the other fixes a try as well.

jayseeg Over a year ago

^5. I'm an idiot for the "val" issue, but I'm glad it prevented validation, cause it works with the correct attribute, but I'd never have realized I was mis-implementing the plugin.

JSK NS · Accepted Answer · 2012-10-11 11:28:22Z

0

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>

edited Oct 11, 2012 at 11:28

JSK NS

3,4542 gold badges30 silver badges42 bronze badges

answered Jul 23, 2012 at 4:36

Ankit Sharma

1

Collectives™ on Stack Overflow

jQuery validation plugin not validating a select box

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related