Question

我正在使用jQuery Validation plugin并尝试验证两个时间字段。我想确保如果为一个字段选择“全部”，则对另一个字段选择“全部”并且end time大于start time

这是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>

以下是自定义规则：

 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");

由于某种原因alert(start_hour.value);返回“未定义”我也尝试使用getElementbyID，但也失败了。我是Javascript的新手所以我知道这很简单。

JsFiddle Here

Answer 1

您不需要在jQuery中使用getElementsByName 请改为尝试，jQuery Attribute Selector

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

或者因为您似乎具有与名称相同的ID，所以您可以使用此选择器

$('select#start_hour')

您的验证方法应该像这样构建

 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");

Answer 2

getElementsByName返回一个数组，即使只有一个结果，所以你需要指定你想要的第一个。

var start_hour = document.getElementsByName("start_hour")[0];
var end_hour = document.getElementsByName("end_hour")[0];

Answer 3

您还可以使用jQuery的ID选择器'＃'

以下也有效：

var start_hour = $("#start_hour");
var end_hour = $("#end_hour");

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

Answer 4

getElementsByName（注意“s”）返回一个数组，因此您必须通过start_hour[0].value引用起始值。我同意约翰你应该明确地使用jquery选择器。

无法使用自定义jQuery表单下拉列表验证选择GetElementByName的值

4 个答案: