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>
Friday, March 13, 2015
Thursday, March 12, 2015
Easy jQuery Error Message Customization
This code will allow you to customize your jQuery error messages:
Add these links to your page
<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>
You can style your error messages:
<style class="cp-pen-styles">
.error {
color:red;
font-family:verdana, Helvetica;
}
</style>
Your script
<script>
$(function () {
$('#formTest').validate({
rules: {
name: { required: true },
address: { required: true }
},
messages: {
name: { required: 'Please enter your name' },
address: { required: 'Please enter your address' }
}
});
});
</script>
Your form
<form action='test.cfm' id="formTest" name="formTest" method='POST'>
<input name="name" value="" />
<input name="address" value="" />
<input type="submit" class="submit" value="Add Appeal Info">
</form>
Add these links to your page
<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>
You can style your error messages:
<style class="cp-pen-styles">
.error {
color:red;
font-family:verdana, Helvetica;
}
</style>
Your script
<script>
$(function () {
$('#formTest').validate({
rules: {
name: { required: true },
address: { required: true }
},
messages: {
name: { required: 'Please enter your name' },
address: { required: 'Please enter your address' }
}
});
});
</script>
Your form
<form action='test.cfm' id="formTest" name="formTest" method='POST'>
<input name="name" value="" />
<input name="address" value="" />
<input type="submit" class="submit" value="Add Appeal Info">
</form>
Subscribe to:
Posts (Atom)