Skip to content

Instantly share code, notes, and snippets.

@JamesVanWaza
Created August 5, 2016 23:05
Show Gist options
  • Save JamesVanWaza/5b1a16bfee5ddf0c78a9afb95d639c6d to your computer and use it in GitHub Desktop.
Save JamesVanWaza/5b1a16bfee5ddf0c78a9afb95d639c6d to your computer and use it in GitHub Desktop.
Packtpub Error Testing
<form id="webForm" method="POST">
<div class="header">
<h3>Register</h3>
</div>
<div class="input-frame">
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" type="text" class="required" />
</div>
<div class="input-frame">
<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" type="text" class="required" />
</div>
<div class="input-frame">
<label for="email">Email:</label>
<input name="email" id="email" type="text" class="required email" />
</div>
<div class="input-frame">
<label for="number">Telephone:</label>
<input name="number" id="number" type="text" class="number" />
</div>
<div class="input-frame">
<label for="dob">Date of Birth:</label>
<input name="dob" id="dob" type="text" class="required date" placeholder="DD/MM/YYYY"/>
</div>
<div class="input-frame">
<label for="creditCard">Credit Card #:</label>
<input name="creditCard" id="creditCard" type="text" class="required credit-card" />
</div>
<div class="input-frame">
<label for="password">Password:</label>
<input name="password" id="password" type="password" class="required" />
</div>
<div class="input-frame">
<label for="confirmPassword">Confirm Password:</label>
<input name="confirmPassword" id="confirmPassword" type="password" class="required" />
</div>
<div class="actions">
<button class="submit-btn">Submit</button>
</div>
</form>
function validateNumber(value) {
if (value !== "") {
return !isNaN(parseInt(value, 10)) && isFinite(value);
//isFinite, in case letter is on the end
}
return true;
}
function validateCreditCard(value) {
if (value !== "") {
return /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/.test(value);
}
return true;
}
function validateDate(value) {
if (value !== "") {
if (/^\d{2}([.\/-])\d{2}\1\d{4}$/.test(value)) {
// Remove leading zeros
value = value.replace(/0*(\d*)/gi, "$1");
var dateValues = value.split(/[\.|\/|-]/);
// Correct the month value as month index starts at 0 now 1 (e.g. 0 = Jan, 1 = Feb)
dateValues[1]--;
var date = new Date(dateValues[2], dateValues[1], dateValues[0]);
if (date.getDate() == dateValues[0] && date.getMonth() == dateValues[1] && date.getFullYear() == dateValues[2]) {
return true;
}
}
return false;
} else {
return true;
}
}
function validateEmail(value) {
if (value !== "") {
return /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i.test(value);
}
return true;
}
function validateRequired(value) {
if (value === "") return false;
return true;
}
function addErrorData(element, error) {
element.parent().addClass('error');
element.after("<div class='error-data'>" + error + "</div>");
}
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
doValidation(input);
}
function doValidation(input) {
/** Remove old errors */
$(input).parent().removeClass('error');
$(input).next('.error-data').remove();
if ($(input).hasClass('required') && !validateRequired($(input).val())) {
addErrorData($(input), "This is a required field");
}
if ($(input).hasClass('email') && !validateEmail($($(input)).val())) {
addErrorData($(input), "Invalid email address provided");
}
if ($(input).hasClass('number') && !validateNumber($(input).val())) {
addErrorData($(input), "This field can only contain numbers");
}
if ($(input).hasClass('date') && !validateDate($(input).val())) {
addErrorData($(input), "Invalid date provided");
}
if ($(input).hasClass('credit-card') && !validateCreditCard($(input).val())) {
addErrorData($(input), "Invalid credit card number");
}
}
if ($('.error-data').length == 0) {
/** No errors, submit the form */
$('#webForm').submit();
}
jQuery(document).ready(function($) {
$('input').on("keyup", function() {
doValidation($(this));
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment