jQuery Validation 突出显示两个字段的一个标签

Posted 2023-05-09

技术标签:

【中文标题】jQuery Validation 突出显示两个字段的一个标签【英文标题】：jQuery Validation Highlighting One Label for Two Fields 【发布时间】：2010-12-25 17:14:07 【问题描述】：

我有一个使用 jQuery Validation 插件的表单验证脚本，其中电话区域有 2 个字段，区号和电话号码。但是，这两个字段只有一个标签为“电话”。在验证中这两个字段都是必需的。

因此，当电话字段中出现错误时，标签会突出显示并显示错误消息。如果区号字段有错误，则会显示错误消息，但标签没有获取错误类别，因此不会突出显示。

谁能想到在区号字段无效时突出显示“电话”标签并显示正确消息的方法？谢谢！

【问题讨论】：

【参考方案1】：

您可以为电话字段编写自定义规则，以检查区号字段。喜欢

jQuery.validator.addMethod('PHONE',function() *check both inputs, return true if both correct* )

【讨论】：

【参考方案2】：

我遇到了同样的问题，我想为一个标签（到期日期）显示一个错误类，无论到期月份还是到期年份为空。正如 Steerpike 所提到的，你不能说像 <label for="expirationDate,expirationYear"> 这样的话，所以我只是在自定义 showErrors 函数中选择一个并更改另一个：

html：

<label for="expirationMonth">Expiration Date:</label>
<input type="text" name="expirationMonth"> / <input type="text" name='expirationYear'>

JS：

$("#form").validate(
  .
  .                                           //error messages, rules, etc. go here
  .
  showErrors: function(errorMap, errorList) 
    this.defaultShowErrors();                 //default show errors behavior
    $.each(errorMap, function(key, value) 
      if(key == 'expirationYear')            //if key is the input without label,
        key = 'expirationMonth';              //make it the label's "for" input
       
      $('#form').find('label[for=' + key + ']').addClass('alert');  //add label class
    );
  
);

如果您有任何其他类似情况，您只需添加另一个 if 语句/else if 语句。

【讨论】：

【参考方案3】：

将标签与两个元素关联实际上是无效的html，不推荐。

来自w3 spec：