Question

I’m using the jQuery Validation plugin and trying to validate two time fields. I want to make sure that if “All” is selected for one field that it is true for the other and and end time is larger than start time

Here is the HTML:

 <form id="schedule">
 <select name='start_hour' id='start_hour'>
    <option value='All00'>All</option>
    <option value='0000'>00</option>
    <option value='0100'>01</option>
    <option value='0200'>02</option>
    <option value='0300'>03</option>...
</select>
 and 
<select name='end_hour' id='end_hour'>
    <option value='All00'>All</option>
    <option value='0000'>00</option>
    <option value='0100'>01</option>
    <option value='0200'>02</option>
    <option value='0300'>03</option>...
</select>
 </form> 

Here is the custom rule:

 jQuery.validator.addMethod(  "schedule", function(value, element) { 

    var start_hour = document.getElementsByName("start_hour");
    var end_hour = document.getElementsByName("end_hour");

    alert(start_hour.value);
    alert(end_hour.value);
    if (start_hour.value == "All00" && end_hour.value !="All00") 
    { 
        alert('end hour all error')
        return false;
          }
        else if (end_hour.value == "All00" && start_hour.value !="All00") 
    { 
        alert('start hour all error')
        return false;
          }
          else if (end_hour.value <= start_hour.value ){
              alert('end hour must be larger error')
        return false;
          }

    else return true; 
  },  "Error with schedule");

for some reason alert(start_hour.value); returns “undefined” I also tried to use getElementbyID and that failed too. I’m really new to Javascript so I know it’s probally something simple.

JsFiddle Here

Answer 1

You do not need to use getElementsByName with jQuery
Try this instead, jQuery Attribute Selector

$('select[name="start_hour"]')

or since you seem to have the id the same as the name you can use this selector instead

$('select#start_hour')

Your Validator Method should be constructed like this

 jQuery.validator.addMethod(  "schedule", function(value, element) { 
    var start_hour = $('select#start_hour');
    var end_hour = $('select#end_hour');

    alert(start_hour.val());
    alert(end_hour.val());

    if (start_hour.val() == "All00" && end_hour.val() !="All00") { 
        alert('end hour all error')
        return false;
    }
    else if (end_hour.val() == "All00" && start_hour.val() !="All00") { 
        alert('start hour all error')
        return false;
    }
    else if (end_hour.val() <= start_hour.val() ) {
        alert('end hour must be larger error')
        return false;
    }
    else return true; 
  },  "Error with schedule");