[jQuery] jQuery Form Validation
Hi there just wondering if I can get some help from you guys?
I have some code as per:
// validate signup form on keyup and submit
var validator = $('form').validate({
event: 'keyup',
rules: {
'<%= ddlRank.UniqueID %>': {
required: true
},
'<%= txtSurname.UniqueID %>': {
minlength: 2,
required: true
},
'<%= txtForename.UniqueID %>': {
minlength: 2,
required: true
},
'<%= ddlGender.UniqueID %>': {
required: true
},
'<%= txtBirthDate.UniqueID %>': {
required: true,
custEmailVal: true
}
}, //end rules
messages: {
'<%= txtSurname.UniqueID %>': {
minlength: jQuery.format("Enter at least {0}
characters"),
required: "This field is required"
},
'<%= txtForename.UniqueID %>': {
minlength: jQuery.format("Enter at least {0}
characters"),
required: "This field is required"
},
'<%= ddlGender.UniqueID %>': {
required: "This field is required"
},
'<%= txtBirthDate.UniqueID %>': {
required: "This field is required"
}
}, //end messages
// specifying a submitHandler prevents the default
submit, good for the demo
submitHandler: function() {
alert("submitted!");
}, //end submitHandler
// set this class to error-labels to indicate valid
fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
$('label.checked').addClass('alt');
//$('form :input')
// .filter('.required').prev
('label.checked').find('span').hide();
}, //end success function(label)
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been
highlighted'
: 'You missed ' + errors + ' fields. They have
been highlighted';
$('<div></div>')
.attr({
'id': 'submitError',
'class': 'warning'
})
.insertBefore('#newuserForm');
$("div#submitError").html(message);
$("div#submitError").show();
$('form :input')
.filter('.required').prev('label').find
('span').hide();
} else {
$("div#submitError").hide();
}
} //end invalidHandler
}); //end validate all
my html is an ordered list and the within each li tag I have this
structure:
<label for="txtSurname" id="lblSurname">
Surname:<span>(required)</span>
</label>
<input name="txtSurname" type="text"
id="txtSurname" class="inputText required" />
What I want to happen is when I have input two characters into the
field so that it validates is to hide the span containing the word
required. I cant seem to find it though! I am not sure if am am right
though in using the success function with the argument label?? Can
anyone see how i ould possibly get around this?
I have had sucess with using the invalidHandler hiding the span but I
cant hide it on only the one span at a time on the fly.
Hope I explained myself!
Tuppers