형태의 자바 스크립트 유효성 확인

Question

나는 이것을 오래 동안 알아 내려고 노력했다. JavaScript가 호출되지만 오류 메시지를 호출하지 않습니다. 오류 메시지를 호출해야하더라도 항상 오류로 표시됩니다. 모든 필드가 초록색으로 표시됩니다.

나는 꽤 할 수있는 한 많은 인터넷 검색을 시도했다. 나는 어떤 장소 : 부분적인 내부

@section footer{ 
Javascript: 

    <script type="text/javascript"> 
     $("document").ready(function() 
     { 
      $("#form-manage").validate({ 

       rules: { 
        passwordNow: { 
         required: true 
        }, 
        password: { 
         required: true, 
         minlength: 3, 
         maxlength: 20 
        }, 
        passwordConfirm: { 
         required: true, 
         minlength: 3, 
         maxlength: 20, 
         equalTo: '#password' 
        }, 
       }, 

       messages: { 
        passwordNow: { 
         required: 'Vennligst tast inn ditt nåværende passord' 
        }, 
        password: { 
         required: 'Vennligst velg et nytt passord' 
        }, 
        passwordConfirm: { 
         required: 'Vennligst bekreft det nye passordet', 
         equalTo: 'Passordene stemmer ikke' 
        }, 
       }, 

       submitHandler: function (form) { 
        $(form).ajaxSubmit({ 
         success: function() { 
          $("#form-manage").addClass('submited'); 
         } 
        }); 
       }, 

       errorPlacement: function (error, element) { 
        error.insertAfter(element.parent()); 
       } 
      }); 
     }); 
    </script> 
} 

양식에서 빈민가 코드 스타일링 미리 사과 :

@using (Html.BeginForm("Manage", "Account", FormMethod.Post, new { @class = "smart-form", id = "form-manage", role = "form" })) 
{ 

    @Html.AntiForgeryToken() 
    <text> 
    <fieldset> 
     <section> 
      <label class="input"> 
       <i class="icon-prepend fa fa-lock"></i> 
        @Html.PasswordFor(m => m.OldPassword, new { @class = "input", placeholder = "Nåværende passord", name = "passwordNow", style = "height:34px;" }) 
       <span class="icon-prepend fa fa-lock"></span> 
      </label> 
     </section> 

     <section> 
      <label class="input"> 
       <i class="icon-prepend fa fa-lock"></i> 
       @Html.PasswordFor(m => m.NewPassword, new { @class = "input", placeholder = "Nytt passord", name = "password", style = "height:34px;" }) 
       <span class="icon-prepend fa fa-lock"></span> 
      </label> 
     </section> 

     <section> 
      <label class="input"> 
       <i class="icon-prepend fa fa-lock"></i> 
       @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "input", placeholder = "Bekreft passord", name = "passwordConfirm", style="height:34px;" }) 
       <span class="icon-prepend fa fa-lock"></span> 
      </label> 
     </section> 
    </fieldset> 

    <footer> 
     <div class="col-xs-5 col-sm-7 col-md-6" style="padding-left:28px"> 
      @Html.ValidationSummary() 
     </div> 
     <input type="submit" value="Lagre endringer" class="btn btn-default" /> 
    </footer> 
</text> 
} 

모든 작품 : 여기

<div class="col-md-12"> 
<p class="text-success">@ViewBag.StatusMessage</p> 
@if (ViewBag.HasLocalPassword){ 
    @Html.Partial("_ChangePasswordPartial") 
} 
else{ 
    @Html.Partial("_SetPasswordPartial") 
} 
</div> 

및 양식입니다 (놀랍게도) 나는 필드를 채우지 않으면 오류 메시지가 표시되지 않는다는 것을 제외하고는. 필요한 길이는 작동하지 않습니다. 암호 필드에 1 문자 만 입력하면 여전히 녹색으로 표시됩니다.

HTML 출력

<form action="/Account/Manage" class="smart-form" id="form-manage" method="post" role="form"> 
    <input name="__RequestVerificationToken" type="hidden" value="irDP1GHQPXnPoPveq5N3QM5qcl4kuG1yf3-yl3rRrCXSKO52rvRMVjjY6WSG0WMChq__8FLMXjH1e_OmCjSn6L7-F3BVZD0mnEV_zZRjWZNKYliS6Zf7pkKiU2GaQ2VbPWWA9Hpni2jFM4e1MHnhgA2" /> 
    <fieldset> 
     <section> 
      <label class="input"> 
       <i class="icon-prepend fa fa-lock"></i> 
       <input class="input" data-val="true" data-val-required="Du må fylle inn ditt nåværende passord." id="OldPassword" name="OldPassword" placeholder="Nåværende passord" style="height:34px;" type="password" /> 
       <span class="icon-prepend fa fa-lock"></span> 
      </label> 
     </section> 

     <section> 
      <label class="input"> 
       <i class="icon-prepend fa fa-lock"></i> 
       <input class="input" data-val="true" data-val-length="Passordet må være minst 6 tegn." data-val-length-max="100" data-val-length-min="6" data-val-required="Du må fylle inn et nytt passord." id="NewPassword" name="NewPassword" placeholder="Nytt passord" style="height:34px;" type="password" /> 
       <span class="icon-prepend fa fa-lock"></span> 
      </label> 
     </section> 

     <section> 
      <label class="input"> 
       <i class="icon-prepend fa fa-lock"></i> 
       <input class="input" data-val="true" data-val-equalto="&#39;Confirm new password&#39; and &#39;New password&#39; do not match." data-val-equalto-other="*.NewPassword" id="ConfirmPassword" name="ConfirmPassword" placeholder="Bekreft passord" style="height:34px;" type="password" /> 
       <span class="icon-prepend fa fa-lock"></span> 
      </label> 
     </section> 
    </fieldset> 

    <footer> 
     <div class="col-xs-5 col-sm-7 col-md-6" style="padding-left:28px"> 
      <div class="validation-summary-valid" data-valmsg-summary="true"> 
       <ul> 
        <li style="display:none"></li> 
       </ul> 
      </div> 
     </div> 
     <input type="submit" value="Lagre endringer" class="btn btn-default" /> 
    </footer> 
</form> 

Answer 1

규칙 선언 :

rules: { 
    passwordNow: { // <- must be name attribute 
     required: true 
    }, 
}, 

귀하의 렌더링 된 HTML :

<input name="OldPassword" type="password" /> 

name 속성 o f 렌더링 된 HTML의 입력 요소가 jQuery 코드에서 .validate() 내에서 선언 한 것과 일치하지 않습니다. 그들은 이어야하며이어야합니다.

Answer 2

나는 당신의 의견에 대한 Enable Client Side Validation에 있다고 생각. 추가 귀하의 의견에

@{ Html.EnableClientValidation(); } 

을 시도하거나 당신의 Web.config에 아래 항목을 추가

<appSettings> 
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>