Skip to content

Instantly share code, notes, and snippets.

@mhenke

mhenke/js_validation_not_working.html

Created February 10, 2011 02:28
Show Gist options
  • Save mhenke/819804 to your computer and use it in GitHub Desktop.
Save mhenke/819804 to your computer and use it in GitHub Desktop.
Download ZIP
validation for js not working
Raw
js_validation_not_working.html
<html>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ValidateThis! Demo Page</title>
<link href="/stylesheets/demostyle.css" media="all" rel="stylesheet" type="text/css" />
<link href="/stylesheets/uni-form-styles.css" media="all" rel="stylesheet" type="text/css" />
<link href="/stylesheets/wheels.css" media="all" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/javascripts/jquery.field.min.js" type="text/javascript"></script>
<script src="/javascripts/jquery.validate.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.validator.addMethod("boolean", function(value, element, options) {
if ( value==null )
{
return false
}
else
{
var tocheck = value.toString().toLowerCase();
var pattern = /^((-){0,1}[0-9]{1,}(\.([0-9]{1,})){0,1}|(true)|(false)|(yes)|(no))$/;
return tocheck.match( pattern ) == null ? false : true;
}
}, jQuery.format(""));
jQuery.validator.addMethod("doesnotcontainotherproperties",
function(value,element,options) {
var isValid = true;
$(options).each(function(){
var propertyName = this;
var propertyValue = $(':input[name='+this+']').getValue();
if (propertyValue.length){
// if this is a mutilple select list, split the value into an array for iteration
if (propertyValue.search(",")){
propertyValue = propertyValue.split( "," )
};
// for each property value in the array to check
$(propertyValue).each(function(){
var test = value.toString().toLowerCase().search(this.toString().toLowerCase()) == -1;
if (!test){ // Only worrie about failures here so we return true if none of the other values fail.
isValid = false;
}
});
}
return isValid;
});
return isValid;
}
, jQuery.format(""));
jQuery.validator.addMethod("inlist", function(value,element,options) {
var theDelim = (options.delim) ? options.delim : ",";
var theList = options.list.split(theDelim);
var isValid = false;
$(theList).each(function(){
if (value.toLowerCase() == this.toLowerCase()){
isValid = true;
}
});
return isValid;
}, jQuery.format(""));
jQuery.validator.addMethod("daterange",
function(value,element,options) {
var dValue = new Date(value);
var isValid = true;
var fromDate = new Date();
var toDate = new Date();
if (options.from){
var fromDate = new Date(options.from);
}
if (options.until){
var untilDate = new Date(options.until);
}
if (toDate == fromDate){
isValid = true;
} else {
isValid = ((fromDate < dValue) & (dValue < untilDate)) ? true : false;
}
return isValid;
}
, jQuery.format(""));
jQuery.validator.addMethod("nohtml", function(value,element,options) {
var m = value.search("</?\\w+((\\s+\\w+(\\s*=\\s*(?:\\\".*?\\\"|'.*?'|[^'\\\">\\s]+))?)+\\s*|\\s*)/?>");
if (m == -1) return true;
else return false;
}, jQuery.format(""));
jQuery.validator.addMethod("pastdate",
function(value,element,options) { var dBefore = new Date(); var dValue = new Date(value); if (options.before) { dBefore = new Date(options.before); } return (dBefore > dValue); }
, jQuery.format(""));
jQuery.validator.addMethod("regex", function(value, element, param) {
var re = param;
return this.optional(element) || re.test(value);
}, jQuery.format(""));
jQuery.validator.addMethod("notinlist", function(value,element,options) {
var theDelim = (options.delim) ? options.delim : ",";
var theList = options.list.split(theDelim);
var isValid = true;
$(theList).each(function(){
if (value.toLowerCase() == this.toLowerCase()){
isValid = false;
}
});
return isValid;
}, jQuery.format(""));
jQuery.validator.addMethod("false",
function(value,element,options) { var pattern = /^([0]|(false)|(no))$/; return value.toLowerCase().match( pattern ) == null ? false : true; }
, jQuery.format(""));
jQuery.validator.addMethod("futuredate",
function(value,element,options) { var dToday = new Date(); var dValue = new Date(value); if (options.after) { dToday = new Date(options.after); } return (dToday < dValue); }
, jQuery.format(""));
jQuery.validator.addMethod("patterns",
function(value,element,options){
var minMatches = 1;
var complexity = 0;
if(!value.length) return true;
if (options["minMatches"]){ minMatches = options["minMatches"]; }
for (var key in options) {
if(key.match("^[pattern]") && value.match(options[key]) ){
complexity++;
};
if(complexity == minMatches) {return true;}
}
if(complexity << minMatches){
return false;
};
}
, jQuery.format(""));
jQuery.validator.addMethod("true",
function(value,element,options) { var pattern = /^([1-9]|(true)|(yes))$/; return value.toLowerCase().match( pattern ) == null ? false : true; }
, jQuery.format(""));
});
</script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.validator.setDefaults({
errorClass: 'errorField',
errorElement: 'p',
errorPlacement: function(error, element) {
error.prependTo( element.parents('div.ctrlHolder') )
},
highlight: function() {}
});
});
</script>
<script type="text/javascript">jQuery(document).ready(function() {
$form_frmMain = jQuery("#frmMain");
$form_frmMain.validate();
if ($form_frmMain.find(":input[name='UserName']").length) { $form_frmMain.find(":input[name='UserName']").rules("add", { required : true, messages: {required: "The Email Address is required."} });}
if ($form_frmMain.find(":input[name='UserName']").length) { $form_frmMain.find(":input[name='UserName']").rules('add',{email: true,messages:{email:'Hey, buddy, you call that an Email Address?'}});}
if ($form_frmMain.find(":input[name='Nickname']").length) { $form_frmMain.find(":input[name='Nickname']").rules('add',{remote: "CheckDupNickname",messages:{remote:'That Nickname is already taken. Please try a different Nickname.'}});}
if ($form_frmMain.find(":input[name='UserPass']").length) { $form_frmMain.find(":input[name='UserPass']").rules("add", { required : true, messages: {required: "The Password is required."} });}
if ($form_frmMain.find(":input[name='UserPass']").length) { $form_frmMain.find(":input[name='UserPass']").rules('add',{rangelength: [5,10]});}
if ($form_frmMain.find(":input[name='VerifyPassword']").length) { $form_frmMain.find(":input[name='VerifyPassword']").rules("add", { required : true, messages: {required: "The Verify Password is required."} });}
if ($form_frmMain.find(":input[name='VerifyPassword']").length) { $form_frmMain.find(":input[name='VerifyPassword']").rules('add',{equalTo: ":input[name='UserPass']",messages:{equalTo:'The Verify Password must be the same as The Password.'}});}
if ($form_frmMain.find(":input[name='Salutation']").length) { $form_frmMain.find(":input[name='Salutation']").rules('add',{regex: /^(Dr|Prof|Mr|Mrs|Ms|Miss)(\.)?$/,messages:{regex:'Only Dr, Prof, Mr, Mrs, Ms, or Miss (with or without a period) are allowed.'}});}
if ($form_frmMain.find(":input[name='LastName']").length) { $form_frmMain.find(":input[name='LastName']").rules("add", { required : function(element) { return $(":input[name='User[FirstName]']").getValue().length > 0; }, messages: {required: "The Last Name is required if you specify a value for the First Name."} });}
if ($form_frmMain.find(":input[name='LikeOther']").length) { $form_frmMain.find(":input[name='LikeOther']").rules("add", { required : function(element) { return $("[name='User[LikeCheese]']").getValue() == 0 && $("[name='User[LikeChocolate]']").getValue() == 0; }, messages: {required: "If you don't like Cheese and you don't like Chocolate, you must like something!"} });}
if ($form_frmMain.find(":input[name='HowMuch']").length) { $form_frmMain.find(":input[name='HowMuch']").rules('add',{number: true});}
if ($form_frmMain.find(":input[name='CommunicationMethod']").length) { $form_frmMain.find(":input[name='CommunicationMethod']").rules("add", { required : function(element) { return $(":input[name='User[AllowCommunication]']").getValue() == 1; }, messages: {required: "If you are allowing communication, you must choose a communication method."} });}
});</script>
</head>
<body>
<div id="container">
<div id="sidebar">
<p>Welcome to the <strong>ValidateThis!</strong> Simple Service Integration Demo Page.
<ul><strong>Demo Options:</strong>
<li>
<a href="/index.cfm/validate-this/index?NoJS=true&amp;Context=Register">Turn off JS Validations</a>
</li>
<li>
<a href="/index.cfm/validate-this/index?NoJS=false">Register a New User</a>
</li>
<li>
<a href="/index.cfm/validate-this/index?Context=Profile&amp;NoJS=false">Edit an Existing User</a>
</li>
<li>
<a href="/index.cfm/validate-this/index">Back to the Home Page</a>
</li>
</ul>
</p>
<p>This sample form includes hints which indicate the various validations that have been defined for the business object that underlies the form.</p>
<p>Use the text links above to toggle JavaScript validations to see both the client-side and server-side validations in action.</p>
<p>All of the validations are driven by a simple xml file, which is used to define the business rules that apply. You can view the xml file <a href="/models/user.xml" target="_blank">here</a>.</p>
<p>The code for this demo integrates ValidateThis into the application via the ValidateThis service object, which is simpler than integrating the framework directly into your business objects. This sample also uses Reactor as an ORM.</p>
<p>Please refer to <a href="http://www.silverwareconsulting.com/index.cfm/ValidateThis" target="_blank">my blog</a> for more detailed information about the framework.</p>
</div>
<div id="content">
<h1>ValidateThis! Integrated BO Demo - with CFWheels</h1>
<h3>Registering a new User (JavaScript Validations are ON)</h3>
<h3></h3>
<div></div>
<div class="formContainer">
<form action="/index.cfm/validate-this/register" class="uniForm" id="frmMain" method="post" name="frmMain">
<fieldset class="inlineLabels">
<legend>Access Information</legend>
<div class='ctrlHolder'><label for="UserName"><em>*</em> Email Address</label><input class="textInput" id="UserName" maxlength="100" name="User[UserName]" type="text" value="" /><p class="formHint">Validations: Required, Must be a valid Email Address.</p></div>
<div class='ctrlHolder'><label for="Nickname">Nickname</label><input class="textInput" id="Nickname" maxlength="50" name="User[Nickname]" type="text" value="" /><p class="formHint">Validations: Custom - must be unique. Try 'BobRules'.</p></div>
<div class='ctrlHolder'><label for="UserPass"><em>*</em> Password</label><input class="textInput" id="UserPass" maxlength="50" name="User[UserPass]" type="password" value="" /><p class="formHint">Validations: Required, Must be between 5 and 10 characters, Must be the same as the Verify Password field.</p></div>
<div class='ctrlHolder'><label for="VerifyPassword"><em>*</em> Verify Password</label><input class="textInput" id="VerifyPassword" name="User[VerifyPassword]" type="password" value="" /><p class="formHint">Validations: Required, Must be between 5 and 10 characters, Must be the same as the Password field.</p></div>
<div class="ctrlHolder">
<label for="Communication Method">User Group</label>
<label for="UserGroupId">User Group Id<select class="textInput" id="UserGroupId" name="User[UserGroupId]"><option value="">Select one...</option><option value="1">Member</option></select></label>
<p class="formHint">Validations: Required.</p>
</div>
</fieldset>
<fieldset class="inlineLabels">
<legend>User Information</legend>
<div class='ctrlHolder'><label for="Salutation">Salutation</label><input class="textInput" id="Salutation" maxlength="10" name="User[Salutation]" type="text" value="" /><p class="formHint">Validations: A regex ensures that only Dr, Prof, Mr, Mrs, Ms, or Miss (with or without a period) are allowed.</p></div>
<div class='ctrlHolder'><label for="FirstName">First Name</label><input class="textInput" id="FirstName" maxlength="50" name="User[FirstName]" type="text" value="" /><p class="formHint">Validations: Required on Update.</p></div>
<div class='ctrlHolder'><label for="LastName">Last Name</label><input class="textInput" id="LastName" maxlength="50" name="User[LastName]" type="text" value="" /><p class="formHint">Validations: Required on Update OR if a First Name has been specified during Register.</p></div>
<div class="ctrlHolder">
<p class="label">Do you like Cheese?</p>
<label for="likeCheese-1" class="inlineLabel">
<input id="LikeCheese" name="User[LikeCheese]" type="radio" value="1" />Yes
</label>
<label for="likeCheese-0" class="inlineLabel">
<input checked="checked" id="LikeCheese" name="User[LikeCheese]" type="radio" value="0" />No
</label>
</div>
<div class="ctrlHolder">
<p class="label">Do you like Chocolate?</p>
<label for="likeChocolate-1" class="inlineLabel">
<input id="LikeChocolate" name="User[LikeChocolate]" type="radio" value="1" />Yes
</label>
<label for="likeChocolate-0" class="inlineLabel">
<input checked="checked" id="LikeChocolate" name="User[LikeChocolate]" type="radio" value="0" />No
</label>
</div>
<div class='ctrlHolder'><label for="LikeOther">What do you like?</label><input class="textInput" id="LikeOther" maxlength="100" name="User[LikeOther]" type="text" value="" /><p class="formHint">Validations: Required if neither Do you like Cheese? nor Do you like Chocolate? are true.</p></div>
<div class='ctrlHolder'><label for="HowMuch">How much money would you like?</label><input class="textInput" id="HowMuch" name="User[howMuch]" type="text" value="" /><p class="formHint">Validations: Numeric - notice that an invalid value is redisplayed upon server side validation failure.</p></div>
<div class="ctrlHolder">
<p class="label">Allow Communication</p>
<label for="AllowCommunication-1" class="inlineLabel">
<input id="AllowCommunication" name="User[AllowCommunication]" type="radio" value="1" />Yes
</label>
<label for="AllowCommunication-0" class="inlineLabel">
<input checked="checked" id="AllowCommunication" name="User[AllowCommunication]" type="radio" value="0" />No
</label>
</div>
<div class="ctrlHolder">
<label for="Communication Method">Communication Method</label>
<label for="CommunicationMethod">Communication Method<select class="textInput" id="CommunicationMethod" name="User[CommunicationMethod]"><option value="">Select one...</option><option value="Phone">Phone</option><option value="Email">Email</option><option value="Pony Express">Pony Express</option></select></label>
<p class="formHint">Validations: Required if Allow Communication? is true.</p>
</div>
</fieldset>
<div class="buttonHolder">
<input type="hidden" name="userid" value="" />
<input type="hidden" name="Context" value="Register" />
<input type="hidden" name="NoJS" value="false" />
<input type="hidden" name="Processing" value="true" />
<input type="submit" value="Save changes" />
</div>
</form>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
<style type="text/css">
#wheels-debug-area
{
clear: both;
margin: 100px 0;
text-align: left;
background: #ececec;
padding: 10px;
border-top: 3px solid #999;
border-bottom: 3px solid #999;
}
#wheels-debug-area td
{
font: 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5em;
color: #333;
}
#wheels-debug-area a
{
color: #333;
text-decoration: underline;
padding: 0 1px;
}
#wheels-debug-area a:hover
{
color: #fff;
background: #333;
text-decoration: none;
}
</style>
<div id="wheels-debug-area">
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="top" style="width:125px;"><strong>Application:</strong></td>
<td>86FF6BDEE675B2B8643BF6D8D2F4428B [<a href="/index.cfm/validate-this/index?NoJS=false&reload=true">Reload</a>]</td>
</tr>
<tr>
<td valign="top"><strong>Framework:</strong></td>
<td>Wheels 1.1.2</td>
</tr>
<tr>
<td valign="top"><strong>CFML Engine:</strong></td>
<td>Adobe ColdFusion 8,0,1,195765</td>
</tr>
<tr>
<td valign="top"><strong>Default Data Source:</strong></td>
<td>vtdemo</td>
</tr>
<tr>
<td valign="top"><strong>Active Environment:</strong></td>
<td>Design [<a href="/index.cfm/validate-this/index?NoJS=false&reload=development">Development</a>, <a href="/index.cfm/validate-this/index?NoJS=false&reload=testing">Testing</a>, <a href="/index.cfm/validate-this/index?NoJS=false&reload=maintenance">Maintenance</a>, <a href="/index.cfm/validate-this/index?NoJS=false&reload=production">Production</a>]</td>
</tr>
<tr>
<td valign="top"><strong>URL Rewriting:</strong></td>
<td>Partial</td>
</tr>
<tr>
<td valign="top"><strong>URL Obfuscation:</strong></td>
<td>Off</td>
</tr>
<tr>
<td valign="top"><strong>Plugins:</strong></td>
<td><a href="/index.cfm?controller=wheels&action=wheels&view=plugins&name=validatethis">validateThis</a></td>
</tr>
<tr>
<td valign="top"><strong>Controller:</strong></td>
<td>validateThis</td>
</tr>
<tr>
<td valign="top"><strong>Action:</strong></td>
<td>index</td>
</tr>
<tr>
<td valign="top"><strong>Key(s):</strong></td>
<td></td>
</tr>
<tr>
<td valign="top"><strong>Additional Params:</strong></td>
<td>
context = Register<br />
nojs = false<br />
</td>
</tr>
<tr>
<td valign="top"><strong>Caching Stats:</strong></td>
<td>culls: 0, hits: 0, misses: 1 </td>
</tr>
<tr>
<td valign="top"><strong>Execution Time:</strong></td>
<td>172ms (action ~97ms, beforefilters ~53ms, view ~46ms, requeststart ~2ms, setup ~1ms, requestend ~1ms)</td>
</tr>
</table>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment