JQuery와 표시/숨기기 사업부는

Question

나는 이런 식으로 양식 제출 후 로딩 메시지를 표시 메시지로드 및 유효성 검증 오류 상자 (빈 양식 값 제출). 내 양식에 유효성 검사 플러그인을 사용하는 동안 오류가없는 경우로드 메시지를 표시해야합니다.

어떻게 해결할 수 있습니까? 로딩 메시지를 표시할지 여부를 결정하는 .valid() 방법을 사용하는 대신 onsubmit 속성을 사용

Answer 1

이 시도 발리

$(document).ready(function() { 
    $("#login").validate({ 
     errorElement: "div", 
     errorPlacement: function (error, element) { 
      error.appendTo("div#content-alert").addClass('alert alert-danger'); 
     }, 
     rules: { 
      name: { 
       required: true, 
       minlength: 6, 
       alpha: true, 
      }, 
     }, 
     messages: { 
      name: { 
       required: "requied message", 
       minlength: "6 character" 
      }, 

     }, 
     submitHandler: function (form) { 
      $('#loading').show(); 
      form.submit(); 
     } 
    }); 

}); 

Answer 2

의 submitHandler 콜백을 사용합니다.

HTML :

<div id="loading" style="display:none;"><img class='image-widthauto' src="/img/Progressbar.gif" /></div> 
<div id="content-alert"></div> 
<form id="login" method="POST" action="" onsubmit="return showLoading();"> 
..... //input 
</form> 

jQuery를;

내가 이해에서

var form = $("#login"); 

function showLoading() 
{ 
    if(form.valid()) 
    { 
    $('#loading').show(); 
    return true; 
    } 
    return false; 
} 

$(document).ready(function() { 
    form.validate({ 
     errorElement: "div", 
     errorPlacement: function(error, element) { 
     error.appendTo("div#content-alert").addClass('alert alert-danger'); 
     }, 
     rules: { 
      name: { 
       required: true, 
       minlength: 6, 
       alpha: true, 
      }, 
     }, 
     messages: { 
      name: { 
       required: "requied message", 
       minlength: "6 character" 
      }, 

     } 
    }); 

}); 

Answer 3

, 당신은 element로드 id와 형태가 오류없이 전송할 때 보여주고 싶다.

The official documentation는 말한다 : 양식이 유효 할 때 실제 제출 처리하기위한

콜백. 폼을 유일한 인수로 가져옵니다. 기본 제출을 대체합니다. Ajax를 통해 양식을 제출할 수있는 올바른 장소입니다.

그래서 당신이 submithandler과 같이 덮어 쓸 수 있습니다 :

귀하의 HTML을 (단지 형태 요소, 나머지는 동일하게 유지 수) :

<form id="login" method="POST" action="#"> //Don't need the onsubmit here 

자바 스크립트가 될 수있다 :

$("#login").validate({ 
    errorElement: "div", 
    errorPlacement: function(error, element) { 
    error.appendTo("div#content-alert").addClass('alert alert-danger'); 
    }, 
    submitHandler: function(form) { 
     $('#loading').show(); //Show the required element here 
     form.submit(); //Submit the form normally if needed 
    }, 
    rules: { 
     name: { 
      required: true, 
      minlength: 6, 
      alpha: true, 
     }, 
    }, 
    messages: { 
     name: { 
      required: "requied message", 
      minlength: "6 character" 
     }, 

    } 
}); 

희망이 있으면 올바른 방향으로 시작할 수 있기를 바랍니다.