The code is pretty simple. I have highlighted the most important parts in red.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js'></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#DateChooser" ).datepicker();
});
</script>
<style class="cp-pen-styles">
.error {font-size:12px; color:#CC0000;}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$("#form").validate({
messages: {
name: "Please enter name.",
surname: "Please enter surname.",
DateChooser: "Please enter date."
},
errorElement: "div",
errorPlacement: function(error, element) {
error.insertAfter(element);
}
});
});
});//]]>
</script>
</head>
<body>
<cfform id="form">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="required" minlength="2" />
<br/>
<div></div>
<br>
<label for="DateChooser">Date</label>
<input id="DateChooser" class="required" name="DateChooser">
<br/>
<div></div>
<br>
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" class="required" minlength="2" />
<br />
<div></div>
<input type="submit" value="submit" id="submit" />
</cfform>
</body>
</html>
No comments:
Post a Comment