Skip to content

Instantly share code, notes, and snippets.

@vishalbasnet23
Created May 9, 2016 10:45
Show Gist options
  • Save vishalbasnet23/d20fbdad463171c6fe5c3909d19fdda0 to your computer and use it in GitHub Desktop.
Save vishalbasnet23/d20fbdad463171c6fe5c3909d19fdda0 to your computer and use it in GitHub Desktop.
Custom jQuery validation for form without submit function.
<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>
$(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