jquery validate depends rule

Question

I have a rule that appears to be formatted like the answer in this thread, but does not validate properly. If I comment out this rule, the validation is performed properly on the rest of the form. Other syntax errors I have found caused the same outcome, so I expect that there is a syntax error here, but durned if I can spot it.

The rule is

freq: {
    required: {
        depends: {function(element){
            return $('#freqBand').val().length > 0 &&
            $('#freqBand').val() != "24GHz");
            }
        }
    }
},

I am expecting that if the input field freqBand (a select input) value is anything other than "24GHz" or nothing, then the freq field is required.

I am just learning jquery, so it may be a real forehead-slapper.

EDIT 11/28

I have done some more troubleshooting and have found that $('#freqBand').val() is undefined.

it is found in the HTML as

<select  name="freqBand" tabindex="6">
        <option value="" label="&ndash;Choose&ndash;" >&ndash;Choose&ndash;</option>
        <option value="27MHz" label="27 MHz" >27 MHz</option>
        <option value="50MHz" label="50 MHz" >50 MHz</option>
        <option value="75MHz" label="75 MHz" >75 MHz</option>
        <option value="24GHz" label="2.4 GHz" >2.4 GHz</option>
</select>

The query validate docs say that the correct syntax for the select element should be

$("select.freqBand option:selected").val()

but that also resolves to undefined. Does this added information help someone to help me out?

you have syntax issues there try `freq: { required: { depends: function (element) { return $('#freqBand').val().length > 0 && $('#freqBand').val() != "24GHz"); } }` — Arun P Johny, Nov 28 '13 at 04:23

score 1 · Answer 1 · edited May 23 '17 at 11:43

I know this is an old post but I'm currently running into a similar issue. That said, I'm concerned about the use of the id selector # for a name attribute. From what I've found, the id selector is in no way to be used for a name attribute, rather the name attribute should be addressed via the selector [name='name']

See: Name vs Id attribute in HTML

This probably doesn't fully solve your problem, but it would definitely be something to be aware of now rather than later. Again, I know it has been a year. Plus, if I'm right about the id selector for name attributes, then a huge issue with your code has been resolved.

Other than that, all of Joke_Sense's information is still true and relevant.

Oh, and I'm new to StackOverflow (though I haven't yet made an account I don't think). If anyone can give me feedback as to whether this response was... well it was meant to be just an aside. I'm just asking for constructive criticism. I've got the knowledge and know-how I just don't want to make a fool of myself.

Hey aljo. First... WOW the italic message is surprising from a new user. The only problem I see with your answer is that it's a comment more than an answer. I know you can't comment yet and it can be a bother sometimes, but this kind of answer isn't an answer, especially with the current answer from Joke_Sense. But great job on staying open for criticism :). — Patrice, Oct 24 '14 at 15:12

score 0 · Answer 2 · answered Nov 28 '13 at 04:23

0

Missing colon after depends. Additional braces after depends is unecessary.Try this:

freq: {
required: {
    depends: function(element){ //Missing colon here and no opening braces required
        return ($('#freqBand').val().length > 0 &&
        $('#freqBand').val() != "24GHz")); 
        }
     }
},

answered Nov 28 '13 at 04:23

Joke_Sense10

5,341
2
18
22

Inserted the colon, but it didn't change the outcome. – Doug Hemingway Nov 28 '13 at 04:27
Did you remove the extra opening braces after depends and it's corresponding closing braces ?? – Joke_Sense10 Nov 28 '13 at 04:29
I did now, but no change. – Doug Hemingway Nov 28 '13 at 04:32
I guess you need to add `rules` before `freq`. – Joke_Sense10 Nov 28 '13 at 04:34
It exists, along with some other rules that work fine if I eliminate this one. I didn't want to clutter up the posted code with irrelevancies. – Doug Hemingway Nov 28 '13 at 04:38
Check this:http://stackoverflow.com/questions/17127509/jqueryvalidate-required-field-depends-doesnt-work – Joke_Sense10 Nov 28 '13 at 04:40

cfnerd · Answer 3 · 2015-05-08T13:06:20.137

This is an old thread, and has likely been solved, but figured I would give it a go.

The most glaring problem I see is that your select input doesn't have an ID assigned to it, yet you are calling to an ID in your depends statement: $('#freqBand').val(). You need to add an ID to the select, in order to reference the element that way.

Also note that your validate statement was also missing a parenthesis. You have an end one after "24GHz", but you don't have a beginning one, which could be causing a problem as well.

Also, not sure why you are using length. I think you might want to be making sure the value has something in it, so I might revise the depends statement a bit.

Anyway, all three of these work (verified using version 1.13.1):

freq: {
    required: { 
        depends: function(element){
            return ($("#freqBand").val() != "" &&  $("#freqBand").val() != "24GHz")
        } 
    } 
}

freq: {
    required: { 
        depends: function(element){
            return ($("select[name=freqBand]").val() != "" &&  $("select[name=freqBand]").val() != "24GHz")
        } 
    } 
}

freq: {
    required: { 
        depends: function(element){
            return ( ($("select[name=freqBand]").val().length > 0) &&  $("select[name=freqBand]").val() != "24GHz")
        } 
    } 
}

Hope this helps.

jquery validate depends rule

3 Answers3