jquery를 취소하는 방법 취소시 유효성을 검사 하시겠습니까?

Question

양식 검증을 위해 jquery 유효성 검사 플러그인을 사용하고 있습니다. 나는 취소 기능으로 이상한 것을보고있다. 하나의 이메일 필드, 제출 버튼 및 취소 버튼이있는 양식이 있습니다. 전자 메일 필드에 불완전한 주소를 입력 한 다음 페이지의 아무 곳이나 클릭하지 않고 취소를 클릭하면 유효성 검사기가 전자 메일 필드를 검사하고 필드 옆에 잘못된 메시지를 표시하고 취소 작업을 중지합니다.

관련 질문이있는 곳은 jQuery Validation plugin: disable validation for specified submit buttons입니다. 그것은 내가 필요한 것처럼 보입니다. 그러나 그것은 작동하지 않습니다! 취소 버튼에 "취소"CSS 클래스를 추가했지만 효과가 없습니다.

이 샘플 코드는 내가 보는 문제점을 보여줍니다. FF와 Chrome 모두에서 동작을 보았습니다.

이 샘플에서는 텍스트 입력에 유효하지 않은 전자 메일 주소를 입력 한 다음 다른 것을 클릭하기 전에 취소 버튼을 클릭하면 유효성 검사기가 텍스트 입력 옆에 메시지를 표시하고 취소 작업이 절대로 발생하지 않습니다. 취소를 다시 클릭하면 페이지가 예상대로 다시로드됩니다. 즉, 취소 할 페이지를 얻으려면 취소를 두 번 클릭해야합니다.

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

     $(".cancel").click(function() { 
      location.reload(true) 
     }) 

    }) 
</script> 

<div> 
    <form name="myForm" id="myForm" action="index.html"> 
     <input type="text" class="required email" id="myField" name="myField"/> 
     <input type="submit" value="Submit"/> 
     <input type="submit" value="Cancel" class="cancel"/> 
    </form> 
</div> 

또한 흥미로운 : 나는 JQuery와 유효성 검증 문서 (http://docs.jquery.com/Plugins/Validation/Reference#Skipping_validation_on_submit)에서 볼 수있는 데모를 실행했습니다. 데모를 실행할 때 유효성 검사가 작동하는지 알 수 없습니다. gobbledygook을 입력하고 제출 버튼을 클릭하더라도 이메일 필드가 유효하지 않은 것으로 표시되지 않습니다. 내가 얻은 것은 폼의 submitHandler에 추가 된 간단한 경고입니다. 취소 버튼도 같은 방식으로 작동하므로 취소 클래스를 추가하면 전혀 작동하지 않을 수 있습니다.

저는 FF와 Chrome에서이 기능을 사용하고 있습니다. jquery 1.9.1 및 jquery-validate 1.11.4를 사용하고 있습니다.

Answer 1

As per the accepted answer on the question you reference을 추가하면 cancel 클래스를 추가하면 유효성 검사가 "억제"됩니다. As you can see in this demo의 경우 취소 버튼은 유효성 검사를 건너 뛰는 것을 제외하고는 다른 제출 버튼과 똑같이 작동합니다. 취소 버튼을 클릭했을 때보고 싶은 것을 정확하게 설명하십시오.

그렇지 않으면

, 어쩌면 이것은 당신이 원하는 : http://jsfiddle.net/25XBT/

jQuery를 :

$(document).ready(function() { 

    var validate = $('#myform').validate({ 
     // your rules & options 
    }); 

    $('#cancel').on('click', function (e) { 
     e.preventDefault(); 
     validate.resetForm(); 
     $('form').get(0).reset(); 
    }); 

}); 

HTML :

<form id="myform"> 
    <input type="text" name="myfield" /> 
    <input type="submit" /> 
    <input type="submit" id="cancel" class="cancel" value="cancel" /> 
</form> 

참조 : http://docs.jquery.com/Plugins/Validation/Validator/resetForm

편집 : class="cancel" 이후로는 formnovalidate 속성이 사용됩니다.

<input type="submit" id="cancel" formnovalidate="formnovalidate" value="cancel" />