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() {
            //set boolean to false to let form submitting
            var error = false;
            $('.user-form').submit(function(e) {
                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();
                $(this).find('.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;
                        }
                       ...