Problems with jQuery Validate on Select List

Question

I've seen tons of samples of how to use jQuery Validation on a select list - and I'm attempting to implement one, but it just isn't functioning for me. I'm really new to the plugin in general and am just completely baffled about what I am doing wrong.

The intended behavior is that it should not validate if the user has left the select menu on "default". They have to make a selection.

I start by wiring up the new validator method.

Javascript

(function($) {
    $.validator.addMethod('mustbe', function(value, element, params) {
        var testValue = params['propertyvalue'];
        var condition = params['condition'];
        if ((condition == '0') && (value != testValue)) return true;
        if ((condition == '1') && (value == testValue)) return true;
        return false;
    });
})(jQuery);

$(document).ready(function() {
    $("#form1").validate();

    $('#form1').submit(function() {
        alert($('#form1').valid());
    });
});

Then I followup by adding the metadata to the actual HTML.

HTML

<form id="form1" action="">
<select id="select_list" data-val="true"
        data-val-mustbe="You must select a value"
        data-val-mustbe-condition="0"
        data-val-mustbe-propertyvalue="default"
        data-val-required="You must select a value" >
        <option value="default">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
</select>
<input type="submit" id="submit" value="Submit" />
</form>

And it just refuses to validate. Here is a link to a fiddle, too :

jsFiddle

What's all that `data-val-XXX` stuff? AFAIK, jquery-validate doesn't do anything with those attributes. You seem to be expecting it to extract them and include them in the `params` parameter to the method. — Barmar, Dec 29 '12 at 05:36

Gajotres · Accepted Answer · 2012-12-29T21:00:56.717

You should have told you are using ASP.NET MVC. It wouldn't help but people would stop asking about custom attribute names.

I have redesigned your code to work with value default and your data-val attributes. This is a code sample:

$(document).ready(function() {    
    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
    }, "");

    $("#form1").validate({
        rules: {
            select_list : {valueNotEquals: $('#select_list').attr('data-val-mustbe-propertyvalue')},  
        },
        messages: {  
            select_list : { valueNotEquals: $('#select_list').attr('data-val-required') }
        },        
        submitHandler: function(form) {
            alert($('#form1').valid());
            form.submit();
        }
    });
});

EDIT :

And here's a jsFiddle example: http://jsfiddle.net/Gajotres/ekPpS/

And here's a version without ASP.NET MVC attributes:

<form id="form1" action="">
    <select id="select_list" name="select_list">
            <option value="default">Choose...</option>
            <option value="1">1</option>
            <option value="2">2</option>
    </select>
    <input type="submit" id="submit" value="Submit" />
</form>

$(document).ready(function() {    
    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
    }, "");

    $("#form1").validate({
        rules: {
            select_list : {valueNotEquals: "default"},  
        },
        messages: {  
            select_list : { valueNotEquals: "You must select a value" }
        },        
        submitHandler: function(form) {
            alert($('#form1').valid());
            form.submit();
        }
    });
});

Sorry, I was not aware that the custom attributes were native to MVC. I believed that was just part of the jQuery Validation plugin. — Ciel, Dec 29 '12 at 20:54
They were not, but don't worry, give me a sec and I will write a update without them. — Gajotres, Dec 29 '12 at 20:58
Thank you for your help, this makes it much clearer. I have posted a followup question for the next step in what I am trying to accomplish - it is here if you are interested - http://stackoverflow.com/questions/14086074/jquery-validation-on-select-list-themed-with-jquery-ui-selectmenu-plugin — Ciel, Dec 29 '12 at 21:26
Funny thing I think I know what is your problem in the next question. Validator plugin can not validate elements whose css display attribute is set to none. I have left you an answer and a working solution ( an other plugin I am using) — Gajotres, Dec 29 '12 at 21:58

score 1 · Answer 2 · answered Dec 29 '12 at 04:18

1

The simple way is to use value='' in the default option, and specify that the select is required:

<select id="select_list" class="required">

answered Dec 29 '12 at 04:18

Barmar

741,623
53
500
612

In my specific situation, I need to provide a default explanation to them. – Ciel Dec 29 '12 at 04:38
What's the problem with that? You specify that in the `message:` option in the call to `validate()`. – Barmar Dec 29 '12 at 04:46
Because "Required" just seems to demand it have a value - I want it to not work for a SPECIFIC value (the one I give it). I thought the same thing - I just decorated it with "required" class and it seemed to work - but that in fact actually locked it out from ever validating true on a select list. – Ciel Dec 29 '12 at 05:11
In your question, you say `should not validate if the user has left it on "default"`. Please update the question with what you're actually trying to do. – Barmar Dec 29 '12 at 05:31
That's fair, I'll get it updated in a moment. Sorry for the confusion. – Ciel Dec 29 '12 at 20:53

score 0 · Answer 3 · answered Dec 29 '12 at 04:47

0

So the answer by Barmar is partially correct but not well explained.

changes I made to get this updated fiddle to work:

added name="select_list" to the select element itself to give jquery.validate what it wants to look for

modified the javascript validate call:

$("#form1").validate({
  rules: {
    select_list: {
      required: true,
      number: true
    }
  },
 submitHandler: function(form) {
   alert($('#form1').valid());
   form.submit();
 }
});

answered Dec 29 '12 at 04:47

DrCord

3,917
3
34
47

Now does this ignore the "mustbe" meta-data I've gone and added? – Ciel Dec 29 '12 at 04:50
I am a little confused about the way you are using the `number` thing here. – Ciel Dec 29 '12 at 05:13
1

It does ignore or not use the 'must-be' meta-data, I am not sure what that is supposed to do and it didn't do anything before while it didn't validate...The original question I was answering is why what you were using wouldn't validate properly, you weren't using validate() properly. – DrCord Dec 29 '12 at 05:34
The number thing is requiring that the input from the select be an integer(number) in order to validate as true so that the "Choose..." default selection will not validate. – DrCord Dec 29 '12 at 05:35
Validation matches rules against the `name` of the elements, not `id`. Your `select` doesn't have a `name` attribute. – Barmar Dec 29 '12 at 22:38
@ Barmar - the line in my answer: '_added name="select_list" to the select element itself to give jquery.validate what it wants to look for_' is already saying that.... – DrCord Dec 30 '12 at 04:01

Problems with jQuery Validate on Select List

Javascript

HTML

jsFiddle

3 Answers3

Linked