jQuery select box validation

Question

I have following code in jQuery.
I need to display a validation message "Year Required" when the option value of select element is "0".

<script type="text/javascript">
$(document).ready(function () {
   $("#register").validate({
       debug: true,
       rules: {
           year: {
               required: function () {
                   if ($("#year option[value='0']")) {
                       return true;
                   } else {
                       return false;
                   }
               }
           }
       },
       messages: {
           year: "Year Required",
       },
   });
})
</script>

Select box

<select name="year"  id="year">
    <option value="0">Year</option>
    <option value="1">1919</option>
    <option value="2">1920</option>
    <option value="3">1921</option>
    <option value="4">1922</option>
</select>

@wolvern Thanks ... but its not working. I had checked it with IE but not showing any error in coding..any ideas ? — Tom
– Tom, Commented Feb 15, 2013 at 14:45
Please do not post duplicates, especially when others already posted answers trying to help you: jQuery select box validations with Validate plugin — Sparky
– Sparky, Commented Feb 15, 2013 at 19:33

Sparky · Accepted Answer · 2013-02-15 21:52:44Z

47

Since you cannot set value="" within your first option, you'll need to create your own rule using the built-in addMethod() method.

jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            year: {
                selectcheck: true
            }
        }
    });

    jQuery.validator.addMethod('selectcheck', function (value) {
        return (value != '0');
    }, "year required");

});

HTML:

<select name="year">
    <option value="0">Year</option>
    <option value="1">1955</option>
    <option value="2">1956</option>
</select>

Working Demo: http://jsfiddle.net/tPRNd/

Original Answer: (Only if you can set value="" within the first option)

To properly validate a select element with the jQuery Validate plugin simply requires that the first option contains value="". So remove the 0 from value="0" and it's fixed.

jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            year: {
                required: true,
            }
        }
    });

});

HTML:

<select name="year">
    <option value="">Year</option>
    <option value="1">1955</option>
    <option value="2">1956</option>
</select>

Demo: http://jsfiddle.net/XGtEr/

edited Feb 15, 2013 at 21:52

answered Feb 15, 2013 at 21:45

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

9 Comments

Tom Over a year ago

Thanks Sparky.. Its got working now. Yes i know second option but i cannot deduct zero from the option values. Can u explain what is the use of this jsfiddle ?

Sparky Over a year ago

@Tom, I left both options in the answer for other readers to understand the difference between the two.

Tom Over a year ago

Jquery is not supported in some old browsers ? If it is like that we need to add server side validations also along with client side scripting ?

Sparky Over a year ago

@Tom, having server-side validation is a backup to protect your database and server since JavaScript validation can be bypassed. It has nothing to do with supporting old browsers.

Tom Over a year ago

@Sparkey . Yes i mean if Javascript validations or jquery may not work is some old browsers, it can be bypassed, then server side validation is inevitable ? Is it strict we need to add server side validation also ?

|

politus · Accepted Answer · 2013-02-15 16:11:05Z

10

To put a require rule on a select list you just need an option with an empty value

<option value="">Year</option>

then just applying required on its own is enough

<script>
    $(function () {
        $("form").validate();
    });
</script>

with form

<form>
<select name="year" id="year" class="required">
    <option value="">Year</option>
    <option value="1">1919</option>
    <option value="2">1920</option>
    <option value="3">1921</option>
    <option value="4">1922</option>
</select>
<input type="submit" />
</form>

fiddle is here

edited Feb 15, 2013 at 16:11

answered Feb 15, 2013 at 16:00

politus

6,0862 gold badges35 silver badges43 bronze badges

4 Comments

Tom Over a year ago

Thanks .. using empty value will works fine. but i cannot use empty values in my program because it is displaying from an array. for adding empty values just need to use required:true only :)

Sparky Over a year ago

@Tom, you should have mentioned this in your OP and you also should have the courtesy to deal with the answers people already posted on your other question: stackoverflow.com/questions/14889736/…

politus Over a year ago

@Tom you can use rule {min:1} in that case, no need for custom rule

A.J. Over a year ago

When using with select2 plugin, it does not focus the right element? why

Rafael Herscovici · Accepted Answer · 2013-10-11 09:38:00Z

1

http://docs.jquery.com/Plugins/Validation/Methods/required

edit the code for 'select' as below for checking for a 0 or null value selection from select list

case 'select':
var options = $("option:selected", element);
return (options[0].value != 0 && options.length > 0 && options[0].value != '') && (element.type == "select-multiple" || ($.browser.msie && !(options[0].attributes['value'].specified) ? options[0].text : options[0].value).length > 0);

edited Oct 11, 2013 at 9:38

Rafael Herscovici

17.2k19 gold badges68 silver badges94 bronze badges

answered Feb 28, 2013 at 9:53

Anish Mathew

192 bronze badges

Comments

Anil chhabra · Accepted Answer · 2017-07-31 07:40:12Z

1

Jquery Select Box Validation.You can Alert Message via alert or Put message in Div as per your requirements.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>
<form method="post">
<select name="year"  id="year">
    <option value="0">Year</option>
    <option value="1">1919</option>
    <option value="2">1920</option>
    <option value="3">1921</option>
    <option value="4">1922</option>
</select>
<button id="clickme">Click</button>
</form>
<script>
$("#clickme").click(function(){

if( $("#year option:selected").val()=='0'){

alert("Please select one option at least");

  $("#message").html("Select At least one option");

}


});

</script>

edited Jul 31, 2017 at 7:40

answered Jul 13, 2017 at 4:09

Anil chhabra

113 bronze badges

4 Comments

Syfer Over a year ago

A code example is good but i would suggest adding in a little description as to what needs to be done or the answer might be flagged as a very low quality answer.

Anil chhabra Over a year ago

The code is for Validation of Select box as defined in question. There are two types of Message one is Alert and Another is Print in Div. Please let me know if you need more clarifications. Thanks

Syfer Over a year ago

I meant put the description with your post. So whoever reads it in the future reads the description as well.

Anil chhabra Over a year ago

description Added. Thanks

Mark Schultheiss · Accepted Answer · 2013-02-15 15:09:45Z

0

simplify the whole thing a bit, fix some issues with commas which will blow up some browsers:

  $(document).ready(function () {
       $("#register").validate({
           debug: true,
           rules: {
               year: {
                   required: function () {
                       return ($("#year option:selected").val() == "0");
                   }
               }
           },
           messages: {
               year: "Year Required"
           }
       });
   });

Jumping to an assumption, should your select not have this attribute validate="required:true"?

edited Feb 15, 2013 at 15:09

answered Feb 15, 2013 at 14:45

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

7 Comments

Tom Over a year ago

@ Mark Thanks.. The coding seems no mistake but it is not producing correct output (no outputs).

Mark Schultheiss Over a year ago

I guess we need to know the exact validation plugin you are using.

Sparky Over a year ago

It was tagged as such, but I fixed the title to make it more clear.

Tom Over a year ago

@ Mark .Not working.. Can u tell which available plugin is best for it. I don't know the name of exact plugin iam using

Tom Over a year ago

MarkSchultheiss & Sparky . It working fine while iam setting in this way <option value="">Year</option>. I think our function() in year is not working

|

Collectives™ on Stack Overflow

jQuery select box validation

5 Answers 5

9 Comments

4 Comments

Comments

4 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

4 Comments

Comments

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related