In this example we are going to review the following
- Mandatory Entry for an Input Box
- Manadatory selection of Radio Buttons, Checkboxes and Dropdown Entry
- Conditional validation of a field based on another entry on the form
- Validate Email and URL entries
- Validate a Date Input in mm/dd/yyy format using a custom method
- Attach a Date picker to an Input box
 |
 |
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex,nofollow" />
<title>jQuery HTML page Validation Plugin</title>
<link rel="stylesheet" href="/resources/themes/master.css" type="text/css" />
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<style>
.myErrors {
color:red;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<script
src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"
type="text/javascript"></script>
<script src="/resources/scripts/mysamplecode.js" type="text/javascript"></script>
<script src="/resources/scripts/date.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// attach datepicker to the input field
// an interactive calendar appears as soon as you focus on the field
// for more information read http://jqueryui.com/demos/datepicker/
$("#myDate").datepicker();
// modify default settings for validation
jQuery.validator.setDefaults({
// where to display the error relative to the element
errorPlacement: function(error, element) {
error.appendTo(element.parent().find('div.myErrors'));
}
});
// custom validation method to make sure the date is in mm/dd/yyyy format
jQuery.validator.addMethod(
"usaDate",
function(value, element) {
console.log(value);
var date = getDateFromFormat(value,'MM/dd/yyyy');
console.log(date);
if (date == 0) {
return false;
}
return true;
},
"Please enter a date in the format mm/dd/yyyy"
);
$("#samplecode").validate({
rules: {
// mandatory entry
myInputBox: "required",
// mandatory entry and valid email address
myEmail: {
required: true,
email: true
},
// mandatory entry and valid URL
myURL: {
required: true,
url: true
},
// madatory date entry and valid date format
myDate : {
required: true,
usaDate : true
},
// mandatory radio button selection
myRadioButton: "required",
// mandatory checkbox selection
myCheckbox: "required",
// mandatory drop down selection
mySelect: "required",
//conditional validation of the textarea based on the radion button selection
convicted: "required",
explain: {
required: function(element) {
return $("input:radio[name=convicted]:checked").val() == 'Y';
}
}
},
//custom error messages
messages: {
myRadioButton:{
required: "Please choose a Color."
},
myCheckbox:{
required: "Please select the Fruits that you love."
},
},
// on page submit
submitHandler: function(){
alert('Form validation was a success, please proceed!');
}
});
});
</script>
</head>
<body>
<div id="allContent">
<%@include file="/header.jsp"%>
<div id="myContent">
<form id="samplecode" name="samplecode" method="POST" action="">
<fieldset>
<legend><b> jQuery Validation DEMO </b></legend>
<table>
<tr>
<td valign="top">
<label for="myInputBox"> Input Text Box </label>
</td>
<td>
<input id="myInputBox" type="text" name="myInputBox" size="50" value=""/>
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="myEmail"> Email Address </label>
</td>
<td>
<input id="myEmail" type="text" name="myEmail" size="50" value=""/>
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="myURL"> Website URL </label>
</td>
<td>
<input id="myURL" type="text" name="myURL" size="50" value=""/>
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="myDate"> Date of Birth </label>
</td>
<td>
<input id="myDate" type="text" name="myDate" size="10" value=""/> (mm/dd/yyyy)
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="myRadioButton"> Radio Buttons </label>
</td>
<td>
<input type="radio" name="myRadioButton" value="R" /> Red
<input type="radio" name="myRadioButton" value="G" /> Green
<input type="radio" name="myRadioButton" value="B" /> Blue
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="myCheckbox"> Some fruits to Choose from </label>
</td>
<td>
<input type="checkbox" name="myCheckbox" value="apple" /> Apple
<input type="checkbox" name="myCheckbox" value="orange" /> Orange
<input type="checkbox" name="myCheckbox" value="banana" /> Banana
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="mySelect"> Drop down for car models </label>
</td>
<td>
<select id="mySelect" name="mySelect" title="Please select your Car">
<option value="">Choose one</option>
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="ford">Ford</option>
<option value="other">Others</option>
</select>
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="convicted"> Have you ever been convicted of a crime? </label>
</td>
<td>
<input type="radio" name="convicted" value="Y" /> Yes
<input type="radio" name="convicted" value="N" /> No
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="explain"> If yes, please explain </label>
</td>
<td>
<textarea id="explain" name="explain" rows="5" cols="60" maxlength="300"></textarea>
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="processForm" type="submit" value="Process Form" />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
<%@include file="/footer.jsp"%>
<div></div>
</body>
</html>
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.