javascript - JQuery:验证表单中的所有输入

Question

我需要将相同的 jquery 验证规则应用于表单中表格的 name="time" 的所有输入。 html代码:

<form id="thresholds">
    <table id="table" width="100%"> 
        <thead> 
        <tr> 
            <th width="35%">Service Name</th> 
            <th width="65%">Threshold</th>        
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
            <td>Srv1</td> 
            <td><input id="Srv1" name="time"></input></td>        
        </tr> 
        <tr> 
            <td>Srv2</td> 
            <td><input id="Srv2" name="time"></input></td>  
        </tr>
        <tr> 
            <td>Srv3</td> 
            <td><input id="Srv3" name="time"></input></td>        
        </tr> 
        </tbody> 
    </table>                    
</form>

输入中的所有值均应为有效时间戳。方法是

$.validator.addMethod("time", function (value, element) {
    return this.optional(element) || /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
}, "Please enter a valid time.");

$("#thresholds").validate({
    rules: {
        time: {
            required: true,
            time: true
        }
    }
});

这样，规则仅评估第一个输入“Srv1”。

我也需要它来影响 Srv2 和 Srv3，即所有

$('input[name="time"]').

预先感谢您的帮助。

Answer 1

问题不在于验证器或选择器。他们都是正确的。在代码的更多行中，我尝试根据表单状态启用/禁用“提交”按钮:

$('input[name="time"]').on('keyup blur', function () { 
               if ($('#thresholds').valid()) {                   
                 $('#run').prop('disabled', false);                         
               } else {
                   $('#run').prop('disabled', true);                        
               }
           }); 

出于某种原因，即使输入无效或为空，条件 $('#thresholds').valid() 也始终返回 TRUE。验证似乎不太有效。

单独验证每个输入解决了问题:

  $('input[name="time"]').on('keyup blur', function ()   { 
     if ($('#thresholds').validate().element($(this))) {                   
         $('#run').prop('disabled', false);                      
      } else {
         $('#run').prop('disabled', true);                        
      }

});