I'm using the popular jQuery validation plugin: Validation
As many know, this plugin works great and is well thought through. However, I'm using an asp.net application which automatically generates the name attributes for all my input fields. Further, the names it generates seem to be invalid to use in the jquery plugin.
I'm wondering if there is another way to target input elements using this plugin, or if the name attribute is the only way.
<script>
jQuery.validator.messages.required = "";
$(document).ready(function () {
$('#form1').validate({
debug: true;
invalidHandler: function(e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted below'
: 'You missed ' + errors + ' fields. They have been highlighted below';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
rules: {
<%=firstName.UniqueID%>: {
required: true,
minlength: 6,
},
email: {
required: true,
email: true,
},
password: {
required: true,
minlength: 6,
},
verify:{
required: true,
equalTo: "#password",
}
}
});
});
</script>
I tried replacing the name with a server side call of the property (shown in "firstName") which does properly call back the name. But the jquery doesn't work at that point, so I'm guessing the generated name is invalid since it has "$" in it.
Rendered:
<script>
jQuery.validator.messages.required = "";
$(document).ready(function () {
$('#form1').validate({
debug: true;
invalidHandler: function(e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted below'
: 'You missed ' + errors + ' fields. They have been highlighted below';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
rules: {
ctl00$ContentPlaceHolderBody$firstName: {
required: true,
minlength: 6,
},
email: {
required: true,
email: true,
},
password: {
required: true,
minlength: 6,
},
verify:{
required: true,
equalTo: "#password",
}
}
});
});
</script>
And the HTML:
<label>Name</label>
<input name="ctl00$ContentPlaceHolderBody$firstName" type="text" id="firstName" /><br />
<label>Email</label>
<input name="ctl00$ContentPlaceHolderBody$ctl00" type="text" /><br />
<label>Password</label>
<input name="ctl00$ContentPlaceHolderBody$password" type="text" id="password" /><br />
<label>Verify Password</label>
<input name="ctl00$ContentPlaceHolderBody$verify" type="text" id="verify" /><br />
<input type="submit" name="ctl00$ContentPlaceHolderBody$submit" value="Submit" id="submit" />
