Menu
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.
932
Your answer The "$(...). validate is not a function" jQuery error occurs when the jQuery validation plugin is not loaded or the jQuery-related scripts are loaded in an incorrect order. The validation plugin should be loaded after the jQuery library.
The Form Tag has “novalidate” Attribute This is the first and the most common reason that causes the issue. HTML5 required attribute validation doesn't work if the form has the novalidate attribute in its markup. With the presence of the attribute, the tag looks like <form action="#" novalidate> .
$("#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.
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>
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
