눈에 거슬리지 않는 유효성 검사 : 모든 필드가 유효 할 때 유효성 검사 요약을 숨기기

눈에 거슬리지 않는 유효성 검사를 사용하면 모든 양식 필드가 유효 할 때 요약 오류 범위가 사라지게 할 수 없습니다. 이 페이지가로드눈에 거슬리지 않는 유효성 검사 : 모든 필드가 유효 할 때 유효성 검사 요약을 숨기기

<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>

, 모든 것이 괜찮 :

내가 생산 코드는 더 복잡 MVC5 솔루션의 일부로서 하나의 파일 예제를 준비 배경이 흰색 필드 및 오류 요약은 숨겨져 :

내가 클릭하면

"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

눈에 거슬리지 않는 유효성 검사 : 모든 필드가 유효 할 때 유효성 검사 요약을 숨기기

답변

관련 문제