Menu
I am trying to get the jquery validation plugin working with onkeyup, or onfocusout options. Each time I add these options and trigger one of them I get an error. The validation works if I submit my form.
I am not really allowed to post the form I am working on, however I have created similar issues with a very simple form that I was just loading up in a directory with all the js under the subdirectories static/js/.
I am using jquery 1.6.2 and jquery validation 1.9.0
Anyone have any thoughts?
<html>
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript" src="static/js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var validator = $('#submitform').validate({
rules: {
name: 'required',
phone: {
required: true,
minlength: 12
},
team: {
required: true,
minlength: 1
},
fax: {
required: true,
minlength: 12
}
},
messages: {
name: 'Your name is required',
phone: 'Your phone number is required',
team: 'Your extension number is required',
fax: 'Your fax number is required'
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next() );
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );
else
error.appendTo( element.parent() );
},
onfocusout: true,
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
});
</script>
<form id="submitform" action=".">
<label for="name">Your Name:</label>
<input id="ins_name" type="text" name="name" maxlength="40" />
<label for="phone">Phone:</label>
<input name="phone" maxlength="14" type="text" id="phone" />
<label for="extension">Extension:</label>
<input name="extension" maxlength="10" type="text" id="extension" />
<label for="fax">Fax:</label>
<input name="fax" maxlength="14" type="text" id="fax" />
<input type="submit" value="Submit">
</form>
416
As stated above, the documentation is flawed. You actually need to set the onfocusout option to a function that accepts the element being validated as a parameter. Here is a working code sample :
$("#form").validate({
onfocusout: function(element) {$(element).valid()}
});
in my case there was a line onkeyup: true then i changed it to false
onkeyup: false
but i still don't know when the error started coming. :)
42
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
