Form Validation
Learn how to validate form
by Meily Chhon
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="rows">
<div class="col-md-12">
<h1>Form Validation</h1>
<form class="form-horizontal user-form" name="user-form" action="#" method="post">
<div class="col-md-6">
<div class="row">
<div class="form-group col-md-10 username">
<label for="InputName" class="control-label label-name">Name</label>
<input type="text" class="form-control input-name required" placeholder="Name" value="">
</div>
</div>
<div class="row">
<div class="input-group col-md-10 sex">
<label class="control-label label-sex">Choose your gender</label><br/>
<label for="RadioSexMale" class="control-label">Male</label>
<input type="radio" id="RadioSexMale" class="input-control required rdo-sex" value="m" name="RadioSex"/>
<label for="RadioSexFemale" class="control-label">Female</label>
<input type="radio" id="RadioSexFemale" class="input-control required rdo-sex" value="f" name="RadioSex"/><br/>
</div>
</div>
<div class="row">
<div class="form-group col-md-10 email">
<label class="control-label" for="InputEmail">Email address</label>
<input type="text" class="form-control input-email required" placeholder="Email" value="">
</div>
</div>
<div class="row">
<div class="form-group col-md-10 password">
<label for="InputPassword" class="control-label">Password</label>
<input type="password" class="form-control input-password required" placeholder="Password" value="">
</div>
</div>
<div class="row">
<div class="form-group col-md-10 confirm-password">
<label for="ConfirmPassword" class="control-label" >Confirm...JavaScript
(function ($) {
var userForm = {
init: function(){
userForm.validate();
},
validate: function (e){
//set boolean to false to let form submitting
var error = false;
$('.user-form').submit( function(){
var thisForm = $(this);
//get the sex radio button
var radioSex = $('.rdo-sex').is(':checked');
//get the check button of terms and condition
var checkTerm = $('.terms').is(':checked');
//remove all error-msg after form submit
$(this).find('.error-msg').remove();
$('.success-msg').remove();
//remove error class from all form fields
$('.form-group').removeClass('has-error');
//loop through each REQUIRED FIELDS
thisForm.find('.required').each(function(){
//get value from each field with val() method
var txtValue = $(this).val();
//find all label with class control-label that are under the parent element
var labelName = $(this).parent().find('label.control-label').text();
//get all value of each select element and if it doesn't has value append error message into its parent
if((txtValue == '' && $(this).hasClass('select-day')) || (txtValue == '' && $(this).hasClass('select-month')) || (txtValue == '' && $(this).hasClass('select-year'))){
if(!$(this).parent().find('label.error-msg').length){
$(this).parent().addClass('has-error');
$(this).parent().append('<label class="error-msg">Please enter your '+labelName+'</label>');
//set boolean to true to stop form from submitting
error = true;
}
}
else if($(this).hasClass('input-file')){
var file = $('.input-file').val().split('.').pop().toLowerCase();
if(file == ''){
$('.upload-file').find('label.error-msg').remove();
$('.upload-file').append('<label class="error-msg">Please choose file to upload</label>');
}else{
$('.input-file').change();
}
}
//get all value of each required fields if it doesn't has value append error message...