Drop down list validation on submit using jQuery

Question

I have five drop down lists with the same options in my form and there should be validation that a drop down cannot have the value which already selected from previous drop down...

<select id ="selected" name="expenseType" class="dynamic_select" >
     <option value="0">-select-</option>
     <option value="1">Van</option>
     <option value="2">SUV</option>
     <option value="3">Hatcback</option>
     <option value="4">Jeep</option>
</select>

On submitting, how can I validate this? I am using the jQuery validation plugin to validate the form.

ShankarSangoli · Accepted Answer · 2011-08-22 12:11:29Z

2

Try something like this

var isValid = true;
var $dynamicSelect = $("select.dynamic_select");
$dynamicSelect.each(function(){
   if($dynamicSelect.find("option[value="+this.value+"]:selected").length > 1){
      isValid = false;
      return false;
   }
});

Now use isValid variable to show the appropriate error message or go ahead and submit the form.

answered Aug 22, 2011 at 12:11

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

1 Comment

maaz Over a year ago

it should consider only the selected drop down list... i mean to say is it should not consider the drop down which is showing -Select_ option

Peter Mortensen · Accepted Answer · 2011-12-10 20:24:02Z

1

Here is some script that uses the jQuery validator framework to do what I think you're after.

<script type="text/javascript">
    $(function () {
        $.validator.addMethod('uniqueselection', function (v, e, d) {
            if (v == '-select-') {
                return true;
            }
            if ($(".dynamic_select option[value='" + v + "']:selected").size() > 1) {
                return false;
            }
            return true;
        });

        $('select').each(function () {
            $(this).rules('add', { uniqueselection: 'This can be selected once' });
        });
    });
</script>

edited Dec 10, 2011 at 20:24

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 22, 2011 at 13:17

Xhalent

3,96424 silver badges21 bronze badges

Comments

Robert · Accepted Answer · 2011-08-22 12:14:56Z

Here you are this will alert if two select are same value, just use five instead of two acording to your needs.

<script type="text/javascript">
        $(document).ready(function(){
           $('#target').bind('submit', function(){
                if($('#selected1').val() == $('#selected2').val()){
                    alert($('#selected1').val()+" "+ $('#selected2').val());
                }
           }); 
        });
    </script>



 <form method="post" id="target">
 <select id ="selected1" name="expenseType" class="dynamic_select" >
     <option value="0">-select-</option>
     <option value="1">Van</option>
     <option value="2">SUV</option>
     <option value="3">Hatcback</option>
     <option value="4">Jeep</option>
 </select> 
  <select id ="selected2" name="expenseType" class="dynamic_select" >
     <option value="0">-select-</option>
     <option value="1">Van</option>
     <option value="2">SUV</option>
     <option value="3">Hatcback</option>
     <option value="4">Jeep</option>
 </select> 
 <input type="submit" value="submit"/>
</form>

Collectives™ on Stack Overflow

Drop down list validation on submit using jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related