Menu
I have a simple page with a form and a button outside the form. I am trying to validate the form on the button click. I have added the rules for validation of the form on the document.onready function. However the form is not getting validated.
HTML:-
<html> <head> <script src="lib/jquery1.5.2.js"></script> <script src="lib/jquery.validate.js"></script> <script src="lib/myjs.js"></script> </head> <body> <form id="form1" name="form1"> Field 1: <input id="field1" type="text" class="required"> </form> <div> <input id="btn" type="button" value="Validate"> </div> </body> </html> JS:-
$(document).ready(function(){ $("#form1").validate({ rules: { field1: "required" }, messages: { field1: "Please specify your name" } }) $('#btn').click(function() { $("#form1").validate(); // This is not working and is not validating the form }); }); Any idea what's wrong?
494
validate() - to initialize the plugin (with options) once on DOM ready. . valid() - to check validation state (boolean value) or to trigger a validation test on the form at any time. Otherwise, if you had a type="submit" button within the form container, you would not need a special click handler and the .
jQuery code for validating TextBox on Button Click Inside the document. ready event handler, the Validate Button has been assigned with a Click event handler. When the Validate Button is clicked, first the TextBox is referenced using jQuery and then its value is trimmed and compared with an Empty string.
Just call $("#registerform"). valid(); inside your button click. Also move your validation declarations to outside of the click function.
$("#form_id"). valid(); Checks whether the selected form is valid or whether all selected elements are valid. validate() needs to be called on the form before checking it using this method.
Within your click handler, the mistake is the .validate() method; it only initializes the plugin, it does not validate the form.
To eliminate the need to have a submit button within the form, use .valid() to trigger a validation check...
$('#btn').on('click', function() { $("#form1").valid(); }); jsFiddle Demo
.validate() - to initialize the plugin (with options) once on DOM ready.
.valid() - to check validation state (boolean value) or to trigger a validation test on the form at any time.
Otherwise, if you had a type="submit" button within the form container, you would not need a special click handler and the .valid() method, as the plugin would capture that automatically.
Demo without click handler
EDIT:
You also have two issues within your HTML...
<input id="field1" type="text" class="required"> You don't need class="required" when declaring rules within .validate(). It's redundant and superfluous.
The name attribute is missing. Rules are declared within .validate() by their name. The plugin depends upon unique name attributes to keep track of the inputs.
Should be...
<input name="field1" id="field1" type="text" /> 
$(document).ready(function() { $("#form1").validate({ rules: { field1: "required" }, messages: { field1: "Please specify your name" } }) }); <form id="form1" name="form1"> Field 1: <input id="field1" type="text" class="required"> <input id="btn" type="submit" value="Validate"> </form> You are also you using type="button". And I'm not sure why you ought to separate the submit button, place it within the form. It's more proper to do it that way. This should work.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
