妥協のない検証：すべてのフィールドが有効な場合の検証サマリーを非表示

控えめな検証を使用すると、すべてのフォームフィールドが有効な場合にサマリーエラースパンを表示できなくなります。妥協のない検証：すべてのフィールドが有効な場合の検証サマリーを非表示

生産コードは、より複雑なMVC5ソリューションの一部であるように私は、単一のファイルの例を準備：

<head> 

    <script src="jquery-3.1.1.js"></script> 
    <script src="jquery.validate.js"></script> 
    <script src="jquery.validate.unobtrusive.js"></script> 

    <style type="text/css"> 
     .input-validation-error { background-color:Red;} 
     .validation-summary-valid { display:none; } 
     .validation-summary-errors { display:block; } 
    </style> 

</head> 

<body> 

    <script> 

     $(function(){ 
      var vsettings = $.data($('form')[0], 'validator').settings; 
      vsettings.onkeyup = false; 
      vsettings.onfocusout = false; 
      vsettings.showErrors = function (errorMap, errorList) { 
       $("#error-summary").html("There are some invalid fields!"); 
       this.defaultShowErrors(); 
      } 

      $('#ok').click(function(e){ 
       $('form').valid(); 
      }); 
     }) 

    </script> 


    <form name="form" method="POST" action="url" id="myform"> 
     <input type="text" name="nomecampo" id="nomecampo" value="" data-val="true" data-val-required="Wrong value!"> 
     <span data-valmsg-for="nomecampo" data-valmsg-replace="true"></span> 
     <br> 
     <input type="text" name="nomecampo2" id="nomecampo2" value="" data-val="true" data-val-required="Wrong value!"> 
     <span data-valmsg-for="nomecampo2" data-valmsg-replace="true"></span> 
     <br> 
     <input type="button" value="OK" id="ok"> 
     <br> 
     <span id="error-summary" data-valmsg-summary="true"></span> 
    </form> 

</body> 

</html>

をこのページがロードされると、すべてがOKです。背景は白とエラーの要約であるフィールドが隠されています：私は、 "OK" をクリックした場合

、空のフィールドが赤になり、corrispondingエラーラベルが示されています。

概要スパンも示されています：

をその後、私はすべてのフィールドにクリックし、「OK」を記入した場合、すべてのフィールドを単一のエラーラベルが隠されている、白になりますが、要約スパンが表示されたまま：

サマリースパンを表示させないようにするにはどうすればよいですか？

出典

2017-11-08 Disti

あなたが唯一の静的なメッセージを持っているので、動的にテキストを書き込むための正当な理由がありません。あなたのHTMLに入れてCSSで隠す。

<span id="error-summary" data-valmsg-summary="true">There are some invalid fields!</span>

CSS：

vsettings.showErrors = function (errorMap, errorList) { 
    if (this.numberOfInvalids()) { 
     $("#error-summary").show(); 
    } else { 
     $("#error-summary").hide(); 
    } 
    this.defaultShowErrors(); 
}

または三項演算子を使用して：フォームが有効/無効であるとき

#error-summary { 
    display: none; 
}

はその後、ちょうどjQueryの表示/非表示を使用spanを切り替える

vsettings.showErrors = function (errorMap, errorList) { 
    var es = $("#error-summary"); 
    (this.numberOfInvalids()) ? es.show() : es.hide(); 
    this.defaultShowErrors(); 
}

出典

2017-11-08 19:00:35 Sparky

ありがとうございました！完璧！ – Disti

は、あなたの設定でこれを試してみてください：

vsettings.showErrors = function (errorMap, errorList) { 
    if (this.numberOfInvalids()) 
    $("#error-summary").text('There are some invalid fields!') 
    else 
    $("#error-summary").text('') 
    this.defaultShowErrors(); 
}

出典

2017-11-08 18:14:19 WaldemarIce

妥協のない検証：すべてのフィールドが有効な場合の検証サマリーを非表示

答えて

関連する問題