JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<input type="text" name="email" id="email" placeholder="email address" /><button>Validate</button>
JavaScript
function validate(type,fieldselector,field,mininput,maxinput){
var value = $(fieldselector).val();
var valid = true;
var message = '';
if(($(fieldselector).prop('tagName') != 'SELECT') && ($(fieldselector).attr('type') != 'radio') && ($(fieldselector).attr('type') != 'checkbox')){
$(fieldselector).removeClass('forminvalid');
if(value.length < mininput){
$(fieldselector).addClass('forminvalid');
message = field + ' input field is not enough characters';
valid = false;
}
if(value.length > maxinput){
$(fieldselector).addClass('forminvalid');
message = field + ' input field is too many characters';
valid = false;
}
}
if(valid){
switch(type){
case "email":
if(validateEmail(value)){
valid = true;
} else {
$(fieldselector).addClass('forminvalid');
message = field + ' input field is not valid Email Address';
valid = false;
}
break;
case "selection":
break;
}
}
var output = Array();
output['message'] = message;
output['valid'] = valid;
output['value'] = value;
return output;
}
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
$(document).ready(function(){
$('button').click(function(){
var validates_as = validate('email','#email','Email Address',3,254);
if(validates_as['status'] == 'valid'){
alert(validates_as['message']);
} else {
alert(validates_as['message']);
}
});
});