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="[e-mail]"/>
    <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/ .

Answer 1

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/