Created
July 7, 2016 15:55
-
-
Save alokstha1/521fb39e4e5eceef78d734ef8b40b132 to your computer and use it in GitHub Desktop.
Custom jQuery validation for form without submit function.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form id="form-id"> | |
<div class="span6 form-table"> | |
<label for="usr">First Name <b>*</b></label> | |
<input name="first_name" type="text" class="form-control" id="usr" data-required="yes"> | |
<div class="cus-validation-error" style="display:none;"> | |
Please Enter Your First Name. | |
</div> | |
</div> | |
<div class="span6 form-table"> | |
<label for="">E-mail address<b>*</b></label> | |
<input name="billing_email" type="text" class="form-control" id="email" data-inputtype="email" data-required="yes"> | |
<div class="cus-validation-error" style="display:none;"> | |
Please Enter Your Email Address. | |
</div> | |
<div class="cus-validation-error-valid" style="display:none;"> | |
Please Enter Your Valid Address. | |
</div> | |
</div> | |
<div class="span3 form-table"> | |
<label for="">State<b>*</b></label> | |
<select name="state" class="form-control"> | |
<option value="">Select One</option> | |
<option value="Queensland">Queensland</option> | |
<option value="Western Australia">Western Australia</option> | |
<option value="South Australia">South Australia</option> | |
<option value="Tasmania">Tasmania</option> | |
</select> | |
<input type="hidden" data-required="yes" id="hidden-state-field" value=""/> | |
<div class="cus-validation-error" style="display:none;"> | |
Please Select Your State. | |
</div> | |
</div> | |
<div class="span12 button-register"> | |
<a href="javascript:void(0);" id ="register">Register</a> | |
</div> | |
</form> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
$('input').each(function(){ | |
if( $(this).data('required') === 'yes' ) { | |
if( ( $(this).val() === '' ) || ( $(this).val().length <= 0 ) ) { | |
$(this).attr('validated', false); | |
} else { | |
$(this).attr('validated', true); | |
} | |
if( $(this).data('inputtype') === 'email' ) { | |
if( ! isValidEmailAddress($(this).val()) ) { | |
$(this).attr('validated', false); | |
} else { | |
$(this).attr('validated', true); | |
} | |
} | |
} | |
}); | |
}); | |
$('body').on('blur keyup keydown', 'input', function() { | |
if( $(this).data('required') === 'yes' ) { | |
checkValidated( $(this) ); | |
} | |
}); | |
$('body').on('change', 'select[name=state]', function() { | |
$('#hidden-state-field').val($(this).val()); | |
$('#hidden-state-field').trigger('keyup'); | |
}); | |
$('body').on('click', '#checkout', function() { | |
if( checkFormValidated() ) { | |
//do your after submission stuffs like ajax | |
} | |
}); | |
function checkValidated(ele) { | |
if( ( ele.val() === '' ) || ( ele.val().length <= 0 ) ) { | |
ele.attr('validated', false); | |
ele.siblings('.cus-validation-error').show(); | |
} else { | |
ele.attr('validated', true); | |
ele.siblings('.cus-validation-error').hide(); | |
} | |
if( ele.data('inputtype') === 'email' ) { | |
if( ! isValidEmailAddress(ele.val()) ) { | |
ele.attr('validated', false); | |
ele.siblings('.cus-validation-error-valid').show(); | |
ele.siblings('.cus-validation-error').hide(); | |
} else { | |
ele.attr('validated', true); | |
ele.siblings('.cus-validation-error-valid').hide(); | |
} | |
} | |
}; | |
function checkFormValidated() { | |
var inValidInputs = []; | |
$('input').each(function(){ | |
if( $(this).data('required') === 'yes' ) { | |
if( $(this).attr('validated') == 'false' ) { | |
inValidInputs.push($(this)); | |
} | |
} | |
}); | |
$.each(inValidInputs, function(idx,val) { | |
val.siblings('.cus-validation-error').show(); | |
}); | |
if( inValidInputs.length > 0 ) { | |
return false; | |
} else { | |
return true; | |
} | |
}; | |
function isValidEmailAddress(emailAddress) { | |
var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i; | |
return pattern.test(emailAddress); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment