클릭 이벤트에 Jquery 유효성 검사가 수행되지 않음

아래 코드에서 내가 뭘 잘못하고 있는지 말해 줄 수 있습니까? 클릭하면 실행되지 않습니다. 제출 적용에 나는 $("form").validate 어떠했는지 조용한 참고 확신 버튼 :

jQuery를 :

 $(document).ready(function() { 
      //Form Submit 
      $('#ClockOutBtn').click(function() { 
       $("form").validate({ 
        rules: { 
         name: "required", // simple rule, converted to {required:true} 
         email: {// compound rule 
          required: true, 
          email: true 
         }, 
         url: { 
          url: true 
         }, 
         comment: { 
          required: true 
         } 
        }, 
        messages: { 
         comment: "Please enter a comment." 
        } 
       }); 
      }); 



     });

HTNML :

내가 양식에 생각 onclick을보다

<fieldset> 
     <div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div> 
     <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div> 
     <div class="form-row"><span class="label">URL</span><input type="text" name="url" /></div> 
     <div class="form-row"><span class="label">Your comment *</span><textarea name="comment" ></textarea></div> 

     <button id="ClockOutBtn" type="button"/> 
    </fieldset>

출처

2011-03-28 Nil Pun

더 나은 제출 :

$("form").bind('submit',function(){ 
     this.validate(etc...) 
     if(valid_criteria) 
      return true // submit 
     else 
      return false // don't submit 
    })

출처

2011-03-28 10:43:14

고맙지 만 입력 버튼을 제출할 수 없습니다. 그것은 이미지 일 필요가 있습니다 (스팸이라고 말하면서 여기에 보여줄 수 없었습니다). 이미지의 클릭 이벤트 일 필요가 있습니다. –

제출 단추는 이미지로 스타일을 지정할 수도 있습니다. CSS를 통해 배경 이미지를 포함해야합니다. –

지금까지 본인의 <input> 필드에는 ID가없고 유효성 검사 기능이 없습니다 이름을 <input> 필드의 ID와 일치시킵니다.

당신은 버튼의 click 이벤트를 필요로하지 않는 플러그인을 자동으로 처리하기 때문에, : 당신이 $("form")....이

EDIT 말할 수 있도록 나는 또한 당신의 <input> 필드 주위에 어떤 <form> 태그를 볼 수 없습니다 제출 버튼을 클릭하면
각 입력 필드는이에서보세요
은 당신이 당신의 입력 필드

주위에 <form> 태그를 가질 필요가

플러그인 유효성 검사에 대한 jQuery 라이브러리를 포함 할 필요가 ID를 필요 : jsfiddle

jQuery를 :

$(document).ready(function() { 



    $("#ClockOutBtn").click(function(){ 
     $("#testForm").validate({ 
        rules: { 
         name: "required", // simple rule, converted to {required:true} 
         email: {// compound rule 
          required: true, 
          email: true 
         }, 
         url: { 
          url: true 
         }, 
         comment: { 
          required: true 
         } 
        }, 
        messages: { 
         comment: "Please enter a comment." 
        } 
       }); 
    }); 

});

HTML :

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js"></script> 
    </head> 
    <body> 

     <form id="testForm"> 
<fieldset> 
     <div class="form-row"><span class="label">Name *</span><input type="text" name="name" id="name" /></div> 
     <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" id="email" /></div> 
     <div class="form-row"><span class="label">URL</span><input type="text" name="url" id="url" /></div> 
     <div class="form-row"><span class="label">Your comment *</span><textarea name="comment" id="comment" ></textarea></div> 

    <button id="ClockOutBtn">Test</button> 


    </fieldset> 
     </form> 
     </body> 
     </html>

출처

2011-03-28 10:47:32

mvc 응용 프로그램이고 양식 태그를 넣지 않았지만 실제 웹 응용 프로그램에는 양식 태그를 넣지 않았습니다. 사용자가 이미지를 클릭하면 양식 유효성을 검사하고 싶습니다. 제출 버튼에 이미지를 입력하는 방법을 알지 못했기 때문에 제출 버튼을 사용할 수 없습니다. –

예제가 click 이벤트에서 작동하도록 내 대답이 변경되었습니다. –

클릭 이벤트에 Jquery 유효성 검사가 수행되지 않음

답변

관련 문제