Form Validation
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/133687/mailcheck.min.js"></script>
<div class="input-wrapper">
<input type="text" class="text-field" placeholder="First Name" name="firstName" id="firstName" value=""></input>
<div class="warning"></div>
</div>
<div class="input-wrapper">
<input type="text" class="text-field" placeholder="Last Name" name="lastName" id="lastName" value=""></input>
<div class="warning"></div>
</div>
<div class="input-wrapper">
<input type="text" class="text-field" placeholder="Email Address" name="emailAddress" id="emailAddress"></input>
<div class="warning"></div>
</div>
<div id="birthday">
<select id="day" name="day">
<option value="#">Day</option>
</select>
<select id="month" name="month" class="reg_birthdate">
<option value="#">Month</option>
</select>
<select id="year" name="year" class="reg_birthdate">
<option value="#">Year</option>
</select>
</div>
<div class="warning"></div>
<div class="input-wrapper">
<input type="password" class="text-field" placeholder="Password" name="password" id="password" value=""></input>
<input type="password" class="text-field" placeholder="Confirm Password" name="confirmPassword" id="confirmPassword" value=""></input>
<div class="warning"></div>
</div>
<input type="submit" id="submit" value="Submit" class="button">
CSS
body {
padding: 10px;
}
#day, #month, #year {
width: 32.7%;
}
.required-field {
border-color: orange !important;
border-width: 2px !important;
}
.success-field {
border-color: green !important;
border-width: 2px !important;
}
.error-field {
border-color: red !important;
border-width: 2px !important;
}
.warning {
background-color: lightgray;
border-radius: 0 0 5px 5px;
display: none;
margin: -16px 0 16px 0;
padding: 0.25em 0.5em;
}
.warning span {
font-size: 0.8rem;
}
input[type="password"] {
width: 49.5%;
display: inline-block;
}
JavaScript
//POPULATE DROPDOWNS
var d = new Date();
var day = $('#day');
var month = $('#month');
var year = $('#year');
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for (var i = 1; i <= 31; i++) {
var opt = i;
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
day.append(el);
}
for (var i = 1; i <= 12; i++) {
var opt = i;
var el = document.createElement("option");
el.textContent = months[i - 1];
el.value = opt;
month.append(el);
}
for (var i = (d.getFullYear() - 18); i > (d.getFullYear() - 100); i--) {
var opt = i;
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
year.append(el);
}
var alphaRegex = new RegExp(/[a-zA-Z\s]/g);
var numericRegex = new RegExp(/([0-9])/g);
var specialCharactersRegex = new RegExp(/([^A-Za-z0-9\s]+)/g);
var emailRegex = new RegExp(/^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,6}$/i);
var alphaCheck = function (input) {
var regex = input.match(alphaRegex);
if (regex !== null) {
return false;
}
};
var numericCheck = function (input) {
var regex = input.match(numericRegex);
if (regex !== null) {
return false;
}
};
var emailCheck = function (input) {
input.replace(/ /g, '');
var regex = input.match(emailRegex);
if (regex === null && input.length > 0) {
return false;
}
};
var checkMail = function(field){
$('#' + field.ID).on('blur', function() {
$(this).mailcheck({
suggested: function(element, suggestion) {
console.log(suggestion.full);
var suggestEmail = "Did you mean... ";
showErrorMessage(field, suggestEmail + '<a>' +suggestion.full+ '</a>');
},
empty: function(element) {
//console.log(element)
}
});
});
};
var dateCheck = function (d, m, y, field) {
var ymd = new Date(y, m - 1, d);
var today = new Date();
if...