Bootstrap Form Validation - Red

bootstrap-form-validation-red.markdown

Bootstrap Form Validation - Red

A Pen by Greig Mc on CodePen.

License.

index.html

<div class="container">
  <h1>Bootstrap Form Validation</h1>
  <p>reusable validation scripts.</p>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel 1</h3>
    </div>
    <div class="panel-body">
      <form>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label class="control-label">First Name</label>
              <input type="text" class="form-control" placeholder="Enter first name">
            </div>
          </div><!-- Col -->

          <div class="col-sm-6">
            <div class="form-group">
              <label class="control-label">Last Name</label>
              <input type="text" class="form-control" placeholder="Enter last name">
            </div>
          </div><!-- Col -->
        </div><!-- Row -->

        <div class="row">
          <div class="col-sm-4">
            <div class="form-group">
              <label class="control-label">City</label>
              <input type="text" class="form-control" placeholder="Enter city">
            </div>
          </div><!-- Col -->

          <div class="col-sm-4">
            <div class="form-group">
              <label class="control-label">State</label>
              <input type="text" class="form-control" placeholder="Enter state">
            </div>
          </div><!-- Col -->

          <div class="col-sm-4">
            <div class="form-group">
              <label class="control-label">Zip</label>
              <input type="text" class="form-control" placeholder="Enter zip code">
            </div>
          </div><!-- Col -->
        </div><!-- Row -->
        
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label class="control-label">Email address</label>
              <input type="email" class="form-control" placeholder="Enter email">
            </div>
          </div><!-- Col -->

          <div class="col-sm-6">
            <div class="form-group">
              <label class="control-label">Password</label>
              <input type="password" class="form-control" placeholder="Password">
            </div>
          </div><!-- Col -->
        </div><!-- Row -->
      </form>
       <div class="alert alert-warning">
        Please complete required fields marked in red.
      </div>
    </div>
    <div class="panel-footer">
      <div class="row">
        <div class="col-sm-12">
          <div class="pull-right">
            <button type="button" class="btn btn-default reset">Reset</button>
            <button type="button" class="btn btn-primary submit">Submit</button>
          </div>
        </div>
      </div>
    </div><!-- Panel Footer -->
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel 2</h3>
    </div>
    <div class="panel-body">
      <form>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label class="control-label">First Name</label>
              <input type="text" class="form-control" placeholder="Enter first name">
            </div>
          </div><!-- Col -->

          <div class="col-sm-6">
            <div class="form-group">
              <label class="control-label">Last Name</label>
              <input type="text" class="form-control" placeholder="Enter last name">
            </div>
          </div><!-- Col -->
        </div><!-- Row -->

        <div class="row">
          <div class="col-sm-4">
            <div class="form-group">
              <label class="control-label">City</label>
              <input type="text" class="form-control" placeholder="Enter city">
            </div>
          </div><!-- Col -->

          <div class="col-sm-4">
            <div class="form-group">
              <label class="control-label">State</label>
              <input type="text" class="form-control" placeholder="Enter state">
            </div>
          </div><!-- Col -->

          <div class="col-sm-4">
            <div class="form-group">
              <label class="control-label">Zip</label>
              <input type="text" class="form-control" placeholder="Enter zip code">
            </div>
          </div><!-- Col -->
        </div><!-- Row -->
      </form>
       <div class="alert alert-warning">
        Please complete required fields marked in red.
      </div>
    </div>
    <div class="panel-footer">
      <div class="row">
        <div class="col-sm-12">
          <div class="pull-right">
            <button type="button" class="btn btn-default reset">Reset</button>
            <button type="button" class="btn btn-primary submit">Submit</button>
          </div>
        </div>
      </div>
    </div><!-- Panel Footer -->
  </div>
</div>

script.js

$('.alert').hide();
$('.submit').click(function () {
  // set variable that counts how many input fields are left blank
  var emptyInputs = $(this).closest('.panel').find('input').filter(function(){
                        return !$(this).val();
                    }).length;
  
  // if none of the input fields are left blank
  if (emptyInputs == 0) {
    // accept data and hide panel
    $(this).closest('.panel').hide();
  } 
  else {
    // within this panel, find all inputs
    $(this).closest('.panel').find("input").each(function () {
      var element = $(this);
      // if any input is empty  
      if (element.val() == "") {
        // add the has-error class to the .form-group parent div
        $(element).closest('.form-group').addClass('has-error');
        // and show alert box
        $(element).closest('.panel').find('.alert').show();
      }
    });
  }
});

// click reset to clear all fields, remove error class, hide alert
$('.reset').click(function () {
  $(this).closest('.panel').find("input").each(function () {
    $(this).val('');
    $(this).closest('.form-group').removeClass('has-error');
    $(this).closest('.panel').find('.alert').hide();
  });
})

scripts

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

body {
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #444;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />