可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I've spent hours on this and I have no idea why this jquery validate() doesn't work. I finally broke it down to minimum and it still doesn't work. This is the actuall code:

<!DOCTYPE html> <html> <head>     <script type="text/javascript" src="jquery-1.8.2.min.js"></script>     <script type="text/javascript" src="jquery.validate.min.js"></script>      <script>          $(document).on("click", "#submit", function() {              $("#form").validate({                 rules: {                     input: { required: true}                 },                 messages: {                     input: { required: "required" }                 },                 ignore:      "",                 errorClass:  'fieldError',                 onkeyup:     false,                 onblur:      false,                 errorElement:'label',                 submitHandler: function() {                                             alert("alert");                 }             });              return false;          });      </script>  </head> <body>      <form id="form">         <input type="text" value="" name="input" id="input" />     </form>     <a href="#" id="submit">submit</a>  </body> </html>

Am I missing something obvious here? I get no errors and nothing happens when "submit" is clicked.

UPDATE: I have moved the validate() outside the "click" event into document "ready" event and now it fires off when the document is loaded outputting message in the console "nothing selected, can't validate, returning nothing" This is not how I want it to work obviously, so how do I attach it to the click event?

UPDATE 2: Thanks to @NXT i finally make the validation run, however "submitHandler" is still not working and I need to use it to make Ajax call, because the form must be submitted without a page reload.

回答1:

Did you intentionally put the submit button outside the form? I modified it, to submit the form when clicked. It works now - the validation message appears, and the alert message too (when you submit the form with some content). Either use the code parts below, or try it online - http://jsfiddle.net/Vcmfs/

Head:

<script>     $(function(){         $("#form").validate({                 rules: {                     input: { required: true}                 },                 messages: {                     input: { required: "required" }                 },                 ignore:      "",                 errorClass:  'fieldError',                 onkeyup:     false,                 onblur:      false,                 errorElement:'label',                 submitHandler: function() {                                             alert("alert");                 }             });          $("#submit").click(function(){             $("#form").submit();             return false;         });     }); </script>

Body:

<form id="form">     <input type="text" value="" name="input" id="input" /> </form> <a href="#" id="submit">submit</a>

回答2:

.validate() doesn't actually perform the validation, it configures the form for validation.

If you change your submit link to a submit button <input type='submit' value='Submit'/>, it will work as expected.

Another option is to call .valid() in your link click handler, which will trigger validation.

See this fiddle for a working example: http://jsfiddle.net/v5HQr/1/

文章来源: jQuery form validate not working

标签

form

validate

jquery