jQuery form validation on button click
JqueryJquery ValidateJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
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();
});
.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.
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
nameattribute is missing. Rules are declared within.validate()by theirname. The plugin depends upon uniquenameattributes to keep track of the inputs.
Should be...
<input name="field1" id="field1" type="text" />
Solution 2 - Jquery
$(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.
Solution 3 - Jquery
You can also achieve other way using button tag
According new html5 attribute you also can add a form attribute like
<form id="formId">
<input type="text" name="fname">
</form>
<button id="myButton" form='#formId'>My Awesome Button</button>
So the button will be attached to the form.
This should work with the validate() plugin of jQuery like :
var validator = $( "#formId" ).validate();
validator.element( "#myButton" );
It's working too with input tag