Validation Jquery

by sunil puvvada

HTML

<link rel="stylesheet" href="http://www.rangde.org/css/vrf5929/bootstrap.css">
<link rel="stylesheet" href="http://www.rangde.org/includes/vrf5947/style.css">
<div class="contentContainer">
  <div class="alert alert-success hide">Form submitted successfully</div>
  <div id="basicInfo">
    <div class="toggleContentInnerSec">
      <div class="row-fluid">
        <div class="span7">
          <label>First Name</label> <br>
          <p class="hide firstNameErrorMsg error">Please enter first name</p>
          <input type="text" name="borrowerBasicDetail.firstName" value="" id="addBorrowers_borrowerBasicDetail_firstName" class="access required" placeholder="Example: 'Sachin' " data-errormsg="firstNameErrorMsg"> <br>
          <label>Last Name</label> <br>
          <p class="hide lastNameErrorMsg error">Please enter last name</p>
          <input type="text" name="borrowerBasicDetail.lastName" value="" id="addBorrowers_borrowerBasicDetail_lastName" class="access required" placeholder="Example: 'Tendulkar' " data-errormsg="lastNameErrorMsg"> <br>
          <label>Date Of Birth</label> <br>
          <p class="hide birthDayErrorMsg error">Please enter date of birth</p>
          <input type="text" name="borrowerBasicDetail.age" value="" id="addBorrowers_borrowerBasicDetail_age" class="access required" placeholder="DD/MM/YYYY" data-errormsg="birthDayErrorMsg"> <br>

        </div>
      </div>

    </div>
  </div>

  <div class="row-fluid pull-left">
    <div class="form-actions">
      <a class="btn btn-success btn-large" id="tabOneSubmit">Submit</a>
    </div>
  </div>

</div>

JavaScript

submit();

function submit() {
  $('#tabOneSubmit').click(function() {
    var status = true;
    $('.required').each(function() {

      var element = $(this);
      var elementVal = $(this).val();
      var errorMsgId = element.attr('data-errorMsg');
      if (elementVal == '') {
        $('.' + errorMsgId).show();
        element.addClass('errorField');
        status = false;
      } else {
        $('.' + errorMsgId).hide();
        element.removeClass('errorField');
      }
    });

    if (status) {
      $('.alert-success').show();
    }

  });
}