如果使用jquery验证发生验证错误,则将类添加到父div

时间:2011-10-31 11:02:04

标签: jquery asp.net-mvc jquery-validate

我的输入字段有以下标记:

<div class="required">
    <label for="Name">Name <em>*</em></label>           
    <div class="input large">
        @Html.TextBoxFor(m => m.Name)
        @Html.ValidationMessageFor(m => m.Name)
    </div>
</div>

如果发生错误,则使用jquery验证插件,然后它将在输入下方添加一个范围,并将类应用于输入本身,以便可以设置错误样式。我还想做的是用一个必需的类向父div添加一个类。因此,例如,如果发生错误,它将为<div class="required error">,然后在与应用于字段并删除错误范围的类相关的情况下修复<div class="required valid">

我该怎么做?我查看了文档站点,但没有看到任何与将父类添加到父div相关的内容。

我做过类似的事情:

if ($('input').hasClass('valid')) {
    $(this).parents('div.required').addClass('valid');

} else if ($('input').hasClass('input-validation-error')) {
    $(this).parents('div.required').addClass('error');
}

但是如何通过验证运行序列?就像发生错误或字段变为有效时一样。

2 个答案:

答案 0 :(得分:0)

我根本没玩过这个,但你可以使用jQuery Validate Hooks

答案 1 :(得分:0)

访问验证器设置

第一项业务是修改表单验证器上的settings对象。您可以通过以下任何方式执行此操作:

  1. 在通过调用jQuery.validator.setDefaults()
  2. 为所有表单加载表单之前
  3. 通过传递.validate([options])
  4. 上的选项初始化表单时
  5. 通过使用$("form").data("validator").settings
  6. 在表单上查找验证程序对象进行初始化

    由于您正在使用MVC,因此unobtrusive-validation将自动初始化表单,因此选项#2无法实现。因此,让我们继续使用选项3 - 此处的目标只是为了能够自定义表单上的设置。

    覆盖默认行为

    我们要修改的默认方法是highlightunhighlight,它们将突出显示无效字段或分别恢复突出显示选项所做的更改。这是他们的默认行为according to the source code

    highlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
        } else {
            $( element ).addClass( errorClass ).removeClass( validClass );
        }
    },
    unhighlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
        } else {
            $( element ).removeClass( errorClass ).addClass( validClass );
        }
    }
    

    所以你在这里也有几个选择。

    1. 完全替换这些功能并自行编写
    2. 包装这些功能并像平常一样调用它们,但在之前或之后添加您自己的自定义代码。
    3. 选项1 - 替换批发

      这条路很容易。只要在那里写下你想要的任何东西。也许来自源代码的种子,也许做自己的事情。

      var valSettings = $("form").data("validator").settings
      valSettings.highlight = function(element, errorClass, validClass) { ... }
      valSettings.unhighlight = function(element, errorClass, validClass) { ... }
      

      选项2 - 换行功能

      这种侵入性较小,因此在大多数情况下可能更为可取。

      由于最终您将替换valSettings.highlight的值,因此您需要访问原始函数的干净原始版本。您可以保存自己的或从全局默认值中抓取一个

      // original highlight function
      var highlightOriginal = $("form").data("validator").settings.highlight;
      var highlightDefaults = $.validator.defaults.highlight
      

      在包装JavaScript函数方面,有几个示例hereherehere)。以下是其中一个示例的解析示例,它将帮助跨函数调用绑定this上下文,保留传递的参数的arity,并保留返回值:

      function wrap(functionToWrap, beforeFunction) {
          return function () {
              var args = Array.prototype.slice.call(arguments),
              beforeFunction.apply(this, args);
              return functionToWrap.apply(this, args);
          };
      };
      

      然后,您还必须快速定义在进行呼叫时要触发的任何其他行为。在这种情况下,让我们找到与元素最近的父div并更新它的类:

      function highlightDecorator(element, errorClass, validClass) {
          $(element).closest("div").addClass(errorClass).removeClass(validClass);
      }
      

      全部包装 (看我在那里做了什么)

      $(function () {
        var valSettings = $("form").data("validator").settings
        valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
        valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
      });
      
      function wrap(functionToWrap, beforeFunction) {
        return function () {
          var args = Array.prototype.slice.call(arguments);
          beforeFunction.apply(this, args);
          return functionToWrap.apply(this, args);
        };
      };
      
      function highlightDecorator(element, errorClass, validClass) {
        $(element).closest("div").addClass(errorClass).removeClass(validClass);
      }
      function unhighlightDecorator(element, errorClass, validClass) {
        $(element).closest("div").addClass(validClass).removeClass(errorClass);
      }
      

      因此,当我们结合所有上述函数时,它看起来应该是这样的:

      Stack Snippets中的工作演示和jsFiddle

      &#13;
      &#13;
      $(function () {
        var valSettings = $("form").data("validator").settings
      	valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
        valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
      });
      
      function wrap(functionToWrap, beforeFunction) {
        return function () {
          var args = Array.prototype.slice.call(arguments);
          beforeFunction.apply(this, args);
          return functionToWrap.apply(this, args);
        };
      };
      
      function highlightDecorator(element, errorClass, validClass) {
        $(element).closest("div").addClass(errorClass).removeClass(validClass);
      }
      function unhighlightDecorator(element, errorClass, validClass) {
        $(element).closest("div").addClass(validClass).removeClass(errorClass);
      }
      &#13;
      input.input-validation-error  {
        border: solid 1px red;
      }
      .input-validation-error label {
        color: red;
      }
      &#13;
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
          
      <form action="/Person" method="post">
        
        <div class="required">
          <label for="Name">Name <em>*</em></label>           
          <input id="Name" name="Name" type="text" value="" 
                 data-val="true" data-val-required="The Name field is required."/>
          <span class="field-validation-valid" 
                data-valmsg-for="Name" data-valmsg-replace="true"></span>
        </div>
        
        <input type="submit" value="Save" />
        
      </form>
      &#13;
      &#13;
      &#13;