関数の結果にエラーテキストが表示されない

Question

これまで他のページで定義をうまく使用しました。基本的にはフィールドが必要ですが、空白のみが入力された場合は失敗します（デフォルトでは、1つのスペースで必要なチェックが行われます）。私は、その時点でハンドラがいつ呼び出されたかと、thisという値を見るだけで警告を発しました。それは私がそれを期待するときに発射され、価値は私が期待している通りです。それはfalseを返しているはずですが、明らかにエラーが表示されていないためではありません。そのdepends関数を削除してちょうどrequired: trueがある場合、ユーザーがフィールドを離れるときにエラーが正しく表示されます。どうしたの？

ContactName: { 
     required: { 
      depends: function() { 
       alert("'" + $(this).val() + "'"); 
       if ($.trim($(this).val()).length === 0) { 
        $(this).val($.trim($(this).val())); 
        return false; 
       } 
       return true; 
      } 
     }, 
     maxlength: 100 
    } 

Answer 1

あなたが（詳細はrules examplesに見てみるために）のような[担当のルールを変更することができます。

ContactName: { 
    required: true, 
    minlength: { 
     depends: function(ele) { 
      if (ele.value.trim().length === 0) { 
       ele.value = ''; 
       return false; 
      } 
      return true; 
     } 
    }, 
    maxlength: 100 
} 

スニペット：

だから、

$("#commentForm").validate({ 
 
    rules: { 
 
     ContactName: { 
 
      required: true, 
 
      minlength: { 
 
       depends: function(ele) { 
 
        if (ele.value.trim().length === 0) { 
 
         ele.value = ''; 
 
         return false; 
 
        } 
 
        return true; 
 
       } 
 
      }, 
 
      maxlength: 100 
 
     } 
 
    }, 
 
    messages: { 
 
     ContactName: "Please enter your contact name" 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 

 

 
<form class="cmxform" id="commentForm" method="get" action=""> 
 
    <fieldset> 
 
     <p> 
 
      <label for="ContactName">Name</label> 
 
      <input id="ContactName" name="ContactName" type="text"> 
 
     </p> 
 
     <p> 
 
      <input class="submit" type="submit" value="Submit"> 
 
     </p> 
 
    </fieldset> 
 
</form>