jquery - 一个字段的asp net mvc自定义客户端验证

Question

我只想覆盖一个表单字段的默认客户端验证。

我所做的是：

  $( ".txt-field" ).change( function( event )
  {
     if ( !checkField( $(this).val() ) )
     {
        $(this).removeClass("valid").addClass("input-validation-error");
     }
     else
     {
        $(this).addClass("valid").removeClass("input-validation-error");
     }
  } );

我的 HTML 是

           <div class="fields">
               @Html.LabelFor( m => m.BlahBlah.Field, "Field" )
               @Html.TextBoxFor( m => m.BlahBlah.Field, new { @class = "textbox txt-field" } )
           </div>

但它不起作用。checkField 函数返回真/假。当我在 javascript 调试器中，并且 checkField 返回 false 时，我看到 input-validation-error 类要添加到我的输入字段中，但紧接着，它被删除并添加了“有效”类！我究竟做错了什么？？？？我删除了任何模型验证属性，如“required”、“maxLength”等。

Answer 1

尝试在“模糊”方法而不是“更改”方法上添加逻辑。

 $( ".txt-field" ).blur( function( event )
{
 if ( !checkField( $(this).val() ) )
 {
    $(this).removeClass("valid").addClass("input-validation-error");
 }
 else
 {
    $(this).removeClass("input-validation-error").addClass("valid");
 }

});

Answer 2

我发现你的逻辑有错误。在 else 块中首先应该删除类然后添加新类。验证以下代码：

  $( ".txt-field" ).change( function( event )
  {
     if ( !checkField( $(this).val() ) )
     {
        $(this).removeClass("valid").addClass("input-validation-error");
     }
     else
     {
        $(this).removeClass("input-validation-error").addClass("valid");
     }
  } );