Archive for February, 2010
JQuery validation Example
Hi all,
I have recently worked on some client-side validation for dynamic generated UI by ASP.Net. As usual, I started to spend some time to write a small htm page for prototype and testing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
</title><link href="./main.css" type="text/css" rel="stylesheet" /><link href="./globalClasses.css" type="text/css" rel="stylesheet" />
<script src="./jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="./jquery.validate.min.js" type="text/javascript"></script>
</head>
<body>
<form name="ctl01" method="post" id="ctl01">
<div id="Ctl0_QuestionList">
<input name="Ctl0_QuestionLlistError" type="hidden" />
<div id="textboxContainerPanel">
<div id="textBoxPanel">
<input name="Ctl0_TextBox1" type="text" id="Ctl0_TextBox1"/>
</div>
</div>
<br />
<select name="Ctl0_DropDownList1" id="Ctl0_DropDownList1">
<option value=""></option>
<option value="BMW">BMW</option>
<option value="Honda">Honda</option>
<option value="Toyota">Toyota</option>
</select>
<br />
<div id="radioContainerPanel">
<div id="radiobuttonpanel">
<input id="Ctl0_RadioButtonList1_0" type="radio" name="Ctl0_RadioButtonList1" value="Milk" /><label for="Ctl0_RadioButtonList1_0">Milk</label>
<br />
<input id="Ctl0_RadioButtonList1_1" type="radio" name="Ctl0_RadioButtonList1" value="Apple" /><label for="Ctl0_RadioButtonList1_1">Apple</label>
<br />
<input id="Ctl0_RadioButtonList1_2" type="radio" name="Ctl0_RadioButtonList1" value="Cheese" /><label for="Ctl0_RadioButtonList1_2">Cheese</label>
</div>
</div>
</div>
<br />
<input type="submit" name="Ctl0_Button1" value="Button" id="Ctl0_Button1" type="submit" class="submit" onclick="printValue();"/>
<script type="text/javascript">
function printValue()
{
var answeredCount = 0;
var tag = 'test';
$("[id$='QuestionList'] input[type='text']").each ( function (index) {
if ($(this).val() != "") answeredCount += 1;
});
$("[id$='QuestionList'] select").each( function (index) {
if ($(this).val() != "") answeredCount += 1;
});
answeredCount += $("[id$='QuestionList'] input[type='radio']:checked").size();
alert(tag + ":" + answeredCount);
}
//<![CDATA[
$(document).ready(function() {
$('#ctl01').validate(
{
errorPlacement: function (error, element)
{
if (element.attr('type') == 'radio')
{
error.insertAfter(element.parent());
}
else
{
error.insertAfter(element);
}
}
}
);
$("[name$='TextBox1']").rules('add',
{
required: true,
messages:
{
required: 'please enter TextBox1.'
}
});
$("[name$='DropDownList1']").rules('add',
{
required: true,
messages:
{
required: 'please enter DropDownList1.'
}
});
$("[name$='RadioButtonList1']").rules('add',
{
required: true,
messages:
{
required: 'please enter RadioButtonList1.'
}
});
$("[name$='QuestionLlistError']").rules('add',
{
required: function(element) {
var requiredCount = 2;
var answeredCount = 0;
$("[id$='QuestionList'] input[type='text']").each ( function (index) {
if ($(this).val() != "") answeredCount += 1;
});
$("[id$='QuestionList'] select").each( function (index) {
if ($(this).val() != "") answeredCount += 1;
});
answeredCount += $("[id$='QuestionList'] input[type='radio']:checked").size();
return (requiredCount > answeredCount);
},
messages:
{
required: 'please enter QuestionList1.'
}
});
});//]]>
</script>
</form>
</body>
</html>
Above is the small htm page of my work. Please spend some time play with it and you will find it is very useful (I believe) for:
1. Change the error message for radio button.
2. Dynamic validation for requried question count/response count.
Enjoy!!
