0

我正在使用jQuery Validation 插件并尝试验证两个时间字段。我想确保如果为一个字段选择“全部”，则另一个字段是正确的，并且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在这里

4

4 回答 4

2

您不需要将 getElementsByName 与 jQuery 一起使用 试试这个，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");
于 2011-05-17T21:41:53.937 回答
1

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

var start_hour = document.getElementsByName("start_hour")[0];
var end_hour = document.getElementsByName("end_hour")[0];
于 2011-05-17T21:45:05.120 回答
1

你也可以使用 jQuery 的 ID 选择器 '#'

以下也有效：

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

alert(start_hour.val());
alert(end_hour.val());
于 2011-05-17T21:46:32.997 回答
0

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

于 2011-05-17T21:46:09.380 回答