Skip to content

Instantly share code, notes, and snippets.

@eduardolundgren

eduardolundgren/gist:881331

Created March 22, 2011 14:52
Show Gist options
  • Save eduardolundgren/881331 to your computer and use it in GitHub Desktop.
Save eduardolundgren/881331 to your computer and use it in GitHub Desktop.
Download ZIP
FormValidator conditional rule checking
Raw
gistfile1.js
<!DOCTYPE html>
<html>
<head>
<script src="../../build/aui/aui.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
<style type="text/css">
fieldset {
border: 1px solid #CCCCCC;
margin: 10px;
padding: 10px;
font-size: 13px;
}
legend {
font-size: 20px;
font-weight: bold;
}
input[type=text], textarea, select {
border: 1px solid #777;
padding: 3px;
}
.aui-form-validator-stack-error {
color: red;
display: block;
font-weight: normal;
font-style: italic;
margin: 3px 0;
}
.aui-form-validator-error-container {}
.aui-form-validator-valid-container {}
.aui-form-validator-error {
background: lightPink;
}
.aui-form-validator-valid {
background: lightGreen;
}
</style>
</head>
<body>
<h1>Alloy - FormValidator</h1>
<form action="" id="fm1" name="fm1">
<fieldset>
<legend>Example 1 - Conditional Required</legend>
<p class="aui-field">
<label class="aui-field-label" for="name1">Name:</label>
<input type="text" name="name1" id="name1" />
<input type="checkbox" name="validate" id="validate" />
<label for="validate">Validate input?</label>
</p>
</fieldset>
<button>Submit</button>
</form>
<script type="text/javascript">
AUI().use('aui-form-validator', function(A) {
var validator1 = new A.FormValidator({
boundingBox: '#fm1',
rules: {
name1: {
required: function() {
return A.one('#validate').get('checked');
}
}
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment