Question about jQuery Validate. When my form loads, I have the submit button at 50% opacity to let the user know it's disabled.
As soon as the form meets all the rules, onkeyup, how do I detect that and allow me to return the submit buttons opacity to 100%.
The " success: function(label) {" is to late, as the requiers the user to have moved on to the next field which isn't the way it works in my app.
Ideas?
You can easily hijack the validation mechanism callbacks using the validate method options. Here is an example (also put it on jsbin):
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
</head>
<body>
<script>
$(function() {
var button = $('#submit1');
function buttonHandler(validator) {
var errors = validator.numberOfInvalids();
if(errors === 0) {
button.removeAttr('disabled');
} else {
button.attr('disabled', 'disabled');
}
}
$('#form1').validate({
rules: {
text1: { required: true }
},
errorPlacement: function (error, element) {
error.insertAfter(element);
buttonHandler(this);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass);
$(element).removeClass(validClass);
buttonHandler(this);
},
unhighlight: function (element, errorClass, validClass) {
$(element).addClass(validClass);
$(element).removeClass(errorClass);
buttonHandler(this);
}
}).form(); // trigger validation
});
</script>
<form id="form1" action="#">
<input id="text1" name="text1" type="text" /><br/>
<input id="submit1" name="submit1" type="submit" value="Test" disabled="disabled" />
</form>
</body>
</html>
The key here is to trigger the validation before any user input (using the validator.form() method), so jquery.validate starts listening to the input events, and starts triggering the callbacks when the key (and other) events fire.
I make this in other way. You have form validation on server, sure?. And why validate form data twice? In client, and on server.
My solution is send form with ajax to server, validate there, and if is no error - save data (or something...). If server validator find some errors, form is returned (on json...) and errors is displayed on client.
Help this? Martin
