2010-05-18 2 views
1

JQuery 유효성 검사 플러그인을 사용하는 방법을 배우고 있으며
이라는 질문에 대해 궁금한 점이 있으시면
에 대해 궁금한 사항이 있습니다. 내가 입력에 필드에 데이터를하지 시도하고
가 제출 버튼을 누르면 마법이 일어JQuery 데이터 유효성 검사 플러그인이 제출 작업에서 작동하는 방식

<form class="cmxform" id="commentForm" method="get" action=""> 
<input id="cname" name="name" size="25" class="required" minlength="2" /> 
<input class="submit" type="submit" value="Submit"/> 
</form> 

:
나는 다음과 같이 입력 텍스트 필드를 가지고 간단한 HTML 양식을 얻었다. 빨간색으로 된 오류 메시지가 나타났습니다.
아무리 열심히해도 몇 번이고
제출 버튼을 눌렀습니다. 아무 것도 제출되지 않았습니다.

제출 작업을 비활성화 한 스크립트가있는 것 같았습니다.
하지만 JQuery Validatyion Plugin에서 어떤 코드 행을 찾지 못했습니다.
예제로 어떻게 작동하는지 배우고 싶습니다.

답변

1

제출 버튼을 버튼 버튼으로 변경하면 작업을 혼동하지 않게됩니다. 그 후에 유효성 확인을 한 후에 수동으로 양식을 제출하게됩니다. 그러면 다음과 같이 표시됩니다.

<head> 
<script type="text/javascript"> 

    //form validation setup 
    var setupFormValidation = function(){ 

     //bind the click event to the new button with id submit-form 
     $("#submit-form").click(function(){ 
      submitForm(); 
     }); 

     //setup validation on commentForm 
     $("#commentForm").validate({ 
      errorLabelContainer: $("div#formerror"), 
      rules: { 
       name: { required: true } 
      }, 
      messages:{ 
       name: "please enter your name"  
      } 
    }); 

    } 

    //define submitForm function 
    //this manually submits form 
    var submitForm = function(){ 
    document.cmxForm.submit(); 
    } 

    //document loaded 
    $(document).ready(function() { 
     //set up your form validation 
    setupFormValidation();    
    }); 

</script> 

</head> 


<!-- add your form error div --> 
<div id="formerror"></div> 


<!-- added name = cmfForm --> 
<form class="cmxform" id="commentForm" method="get" action="" name="cmxForm"> 
<input id="cname" name="name" size="25" class="required" minlength="2" /> 

<!-- changed from submit to button with id of submit-form for jquery --> 
<input type="button" class="submit" id="submit-form" value="Submit"/> 

</form> 
0

다음 코드는 JQuery Validate에 대해 examples을보고있는 경우 제출 작업을 중지합니다. 이것을 이해하려면 다음

$.validator.setDefaults({ 
    submitHandler: function() { alert("submitted!"); } 
}); 
1

시도는 : 당신이 클릭 취소 조치가 나던 일이 제출하는 경우

<script type="text/javascript"> 
$(document).ready(function() { 
$("#btnSubmit").click(function(){confirm("Are you sure ?");}); 
}); 

</script> 

당신이 그것을 볼 수

페이지에 넣고. 버튼에서 false를 반환하면 다시 게시를 취소하고, true를 반환하면 다시 게시가 발생합니다.

관련 문제