jquery - labelify + form validation

[Tripnologist]

jquery - form validation

-removed due to google caching the page-

 

[Pho]

Firefox is complaining that:
Error: WebForm_OnSubmit is not defined
Source File: http://tripnologist.com/help/form.html
Line: 1

might be worth a start.

edit: it fails in firefox if I press submit twice too?

 

[Tripnologist]

The error is just because I stripped the page down to the form and put it on my personal server instead of the server it'll be running from.

Thanks for looking anyway though.

 

[Pho]

Right, I'm back from work now so I can be a bit more useful.

Setting 'focusInvalid : false' when you initialise validate does the same as what you did by modifying the validator code. It's much better to do it here to keep validate in its original form (and not effect other things which use the validator).

You can use invalidHandler to override what happens when the form is invalid. Here all I'm doing is using jQuery to de-select (blur) every input/textarea - I think what's happening is the validator is selecting all boxes you haven't filled in, and causing the labels to be removed as it was intended.

Full code:

$(document).ready(function() {

	$("input:text, textarea").labelify();
	
	$("#form").validate({
		focusInvalid : false,
		rules: { 
			name: {
					required: true
			},
			email: {
					required: true,
					email: true
			},
			friendemailrequired: {
					required: true,
					email: true
			}			
        }, 
        messages: { 
            name: { 
                required: "Required"
            }, 
            email: { 
                required: "Required",
				email: "Required"
            },
            friendemailrequired: { 
                required: "Required",
				email: "Required"
            }			
        }, 
        // set this class to error-labels to indicate valid fields 
        success: function(label) { 
         // set   as text for IE 
        label.html(" ").addClass("checked");
        } ,
		invalidHandler: function(form, validator) {
				// deselect all textboxes
				$(":input, textarea").blur();
		}		
	})
});

You should also be able to revert jquery.validate.js back to the original, I've moved the logic above instead.

 

[Tripnologist]

I'll give that a go, thanks.