Validate experience dropdown with jQuery with minimum and maximum values

Question

I am using mvc4

I have 2 dropdownlist one is minimum experience and the oher is maximum experience, i am trying to validate minimum with maximum vice-versa from client side, but not getting it worked in a way i want it. The things i want to achieve like..

1. Minimum should be always less than maximum.

2. if minimum and maximum both are 0 then it should go on.

3. both can allow blank (Don't want to give min value or max value), i mean that user can also select default values as it is like ---minimum--- and ---maximum---.

4. if minimum is not selected just maximum is selected then it should go on. same case in minimum too.

So far i have this:

Created FIDDLE to illustrate idea.

jQuery

_ **_EDITED** _____________

Reached so close, Come up to this, now just one thing remaning, maximum is checked as a value and compared, but i want to ignore it via condition.

$("#MinExperienceDropDown").change(function () {
     if ((($(this).val()) != "" && ($("#MaxExperienceDropDown").val() != "")) && ($("#MaxExperienceDropDown").val() != "") && ($(this).val() > $("#MaxExperienceDropDown").val())) {
                 alert('Minimum expreience should be less than maximum');
            }
        });
 $("#MaxExperienceDropDown").change(function () {
           if ($(this).val() < $("#MinExperienceDropDown").val()) {
              alert('Maximum expreience should be greater than minimum');
           }
  });

HTML

<div style="text-align: left">
   <select name="MinExperience" id="MinExperienceDropDown" style="width: 32%" class="select">
      <option value="">--Minimum--</option>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
   </select>
   <select name="MaxExperience" id="MaxExperienceDropDown" style="width: 32%; float: right;margin-right: 82px" class="select">
      <option value="">--Maximum--</option>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
   </select>
</div>

Any help is greatly appreciated.

Thank you all in advance.

I assume you're looking for client side validation? This question should get you started on server-side: http://stackoverflow.com/q/13764684/534109 - in a nutshell, nothing is baked into MVC at the moment to get you unobtrusive validation. — Tieson T., Jun 01 '13 at 06:05

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Is this closer to what you want? If not, it should at least be easier to edit from this point forward I hope.

JS

//Cache these as variables so we only have to select once
var $min= $("#MinExperienceDropDown");
var $max = $("#MaxExperienceDropDown");
var $msg = $("#message");

//Apply a single change event to fire on either dropdown
$min.add($max).change(function () {
    //Have some default text to display, an empty string
    var text = "";
        
    //Cache the vales as variables so we don't have to keep getting them
    //We will parse the numbers out of the string values
    var minVal = parseInt($min.val(),10);
    var maxVal = parseInt($max.val(),10)
    
    //Determine if both are numbers, if so then they both have values
    var bothHaveValues = !isNaN(minVal) && !isNaN(maxVal);
    
    if(bothHaveValues){
        if(minVal > maxVal){
            text += 'Minimum expreience should be less than maximum';
        }else if(maxVal < minVal){
            text += 'Maximum expreience should be greater than minimum';
        }
    }
    
    //Display the text
    $msg.html(text);
});

HTML

<label for="MaxExperienceDropDown">Min Experience</label>
<select name="MinExperience" id="MinExperienceDropDown">
    <option value=""></option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<br>
<br>
    
<label for="MaxExperienceDropDown">Max Experience</label>
<select name="MaxExperience" id="MaxExperienceDropDown">
    <option value=""></option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<div id="message"></div>

DEMO: http://jsfiddle.net/pLkX6/3/

Wow Chris... It worked like a charm. this is exactly what i wanted. +1 — Dhaval Marthak, Jun 01 '13 at 07:38
Can we hide the value which unnecessary for user instead of showing "Minimum expreience should be less than maximum" the message ? if yes please tell me — Inderjeet, Mar 24 '18 at 10:38
Let If user select 50 lacs in minimum value then maximum option value automaticly hide below 50 lacs value then user cant see below 50 lacs — Inderjeet, Mar 24 '18 at 10:42

score 1 · Answer 2 · answered Jun 01 '13 at 07:06

Write one javascript method

function validation(){
if($("#MaxExperienceDropDown").val() != "" && $("#MinExperienceDropDown").val() != "" &&  (($("#MaxExperienceDropDown").val() != 0 && $("#MinExperienceDropDown").val() != 0) || ($("#MaxExperienceDropDown").val() < $("#MinExperienceDropDown").val()))){
 //your alert message here
}
}

call this method from onChange event of both the dropdown as given below

$("#MinExperienceDropDown").change(function () {
    validation()
        });
 $("#MaxExperienceDropDown").change(function () {
          validation()
  });

Validate experience dropdown with jQuery with minimum and maximum values

2 Answers2

DEMO: http://jsfiddle.net/pLkX6/3/