Question

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

因此，当电话字段中出现错误时，标签会突出显示并显示错误消息。如果区域代码字段中存在错误，则会显示错误消息，但标签不会获取错误类，因此不会突出显示。

当区号代码字段无法验证时，是否有人会想到一种突出“电话”标签并显示正确消息的方法？谢谢！

Answer 1

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

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

Answer 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语句。

Answer 3

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

来自w3 spec：

每个LABEL元素只与一个表单控件相关联。

我建议为邮政编码添加第二个标签元素，如果您不希望用户将其边距设置为-999em或类似方法，则可以从屏幕上直观地删除它。

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

3 个答案: