/* Nothing to see here go ahed to the result tab or to the HTML tab */
<!doctype html>
<html>
<head>
<!-- jQuery --><script src="https://rawgit.com/royriojas/Astrea/master/lib/jquery/jquery.js"></script>
<!-- jQuery UI --><script src="https://rawgit.com/royriojas/Astrea/master/lib/jqueryui/jquery-ui.js"></script>
<link type="text/css" href="https://rawgit.com/royriojas/Astrea/master/lib/jqueryui/css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="stylesheet">
<link type="text/css" href="https://rawgit.com/royriojas/Astrea/master/astrea/css/reset-base.css" rel="stylesheet">
<link type="text/css" href="https://rawgit.com/royriojas/Astrea/master/astrea/css/forms.css" rel="stylesheet">
<!-- validator javascript files -->
<link type="text/css" href="https://rawgit.com/royriojas/Astrea/master/astrea/validator/validator.css" rel="stylesheet">
<script src="https://rawgit.com/royriojas/Astrea/master/astrea/validator/validator.js"></script>
<style type="text/css">
.message {
padding: 20px;
color: white;
background: green;
text-align: center;
display: none;
}
.note {
background: #eee;
padding: 10px;
margin-top: 10px;
}
.note p {
margin-bottom: 10px;
}
</style>
</head>
<body>
<script type="text/javascript">
function notNullOrEmpty(val) {
return val != null && val != "";
}
function checkUserName(field, val, validator, callback) {
//simulate an ajax call
setTimeout(function() {
var fname = $('#NameField').val();
var lname = $('#LastField').val();
//only allow user names that not contains the original first name or last name on them.
var isValid = notNullOrEmpty(val) && notNullOrEmpty(fname) && notNullOrEmpty(lname) && val.indexOf(fname) < 0 && val.indexOf(lname) < 0;
callback(isValid);
}, 200);
}
$(function() {
$('.forms').validator();
$('.forms .button.save').bind('validationsuccess', function() {
$('.message').html('Yay! the data in the form is valid... doing some processing now!').show();
});
})
</script>
<div class="forms">
<form action="">
<fieldset>
<div class="legend">
Yet Another Validator Widget
</div>
<ul class="fields oneline">
<li>
<div>
<label>
First Name :
</label>
<input id="NameField" type="text" />
<div class="validator sync required" data-field="#NameField">
<p>
Please provide your first name
</p>
<p class="description">
This is how a brief description will be shown.
</p>
</div>
</div>
</li>
<li>
<div>
<label>
Last Name :
</label>
<input id="LastField" type="text" />
<div class="validator sync required" data-field="#LastField">
<p>
Please provide your last name
</p>
</div>
</div>
</li>
<li>
<div>
<label>
User Name :
</label>
<input id="UserNameField" type="text" />
<div class="validator custom" data-field="#UserNameField" data-custom-function="checkUserName">
<p>
The user name can't contains your first or last names
</p>
</div>
</div>
</li>
<li>
<div>
<label>
Email :
</label>
<input id="EmailField" type="text" />
<div class="validator sync required regex" data-field="#EmailField" data-regex="([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4})" data-modifiers="">
<p>
Please enter a valida email
</p>
</div>
</div>
</li>
<li>
<div>
<label>
Select Project:
</label>
<select id="sprint">
<option value="-1">None</option>
<option value="2">jQuery</option>
<option value="3">jQuery UI</option>
<option value="4">Mootools</option>
</select>
<div class="validator sync compare" data-field="#sprint" data-comparison-type="notEqual" data-comparison-value="-1">
<p>
Please select a project
</p>
</div>
</div>
</li>
<li>
<div>
<label>
Score (1-10)
</label>
<input type="text" id="Puntuation" />
<div class="validator sync required range" data-field="#Puntuation" data-min-value="1" data-max-value="10">
<p>
Please provide a puntuation between 1 and 10 only!
</p>
</div>
</div>
</li>
<li>
<div class="validation-summary">
<p>
This message will only been show when the validation fails
</p>
</div>
<p class="message">
</p>
</li>
<li>
<div class="buttons">
<a href="#" class="validation-trigger button save" data-validation-method="async"><span>Validate the form!</span></a>
<a href="#" class="validation-trigger button save" data-validator-group=".sync" data-validation-method="sync"><span>Validate sync!</span></a>
<a href="#" class="validation-clear button clear"><span>Clear the validators!</span></a>
</div>
<div class="note">
<p>
Validate the form using the sync method will fail for the case of the current custom validator. Because it involves ajax validation. Which is asynchronous
</p>
<p>
So for this particular case we mark all the validators that can be validated in sync with the sync class, and set the data-validator-group property of the the button to only validate those fields
</p>
</div>
</li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>
/* Nothing to see here go ahed to the result tab or to the HTML tab */