arthur-littm/form_validation.js

## form_validation.js
// Your validation code will go in there.
// Write your validation functions, and bind events
// in a jQuery DOM ready callback

$(document).ready(function() {
  var events = "blur keyup"
  $(".form-control").on(events, function() {
    var value = $(this).val();
    if (value === "") {
      $(this).parent().removeClass('has-success').addClass('has-error');
    } else {
      $(this).parent().removeClass('has-error').addClass('has-success');
    };

    var regexps = {
      email: /.*@.*\..*/,
      zip_code: /^\d{5}$/,
      mobile_phone: /^\d{10}$/
    };

    if (Object.keys(regexps).includes($(this).attr('id'))) {
      var reg = regexps[$(this).attr('id')];
      if (reg.test(value)) {
        $(this).parent().removeClass('has-error').addClass('has-success');
      } else {
        $(this).parent().removeClass('has-success').addClass('has-error');
      };
    };

    var numberOfFormGroups = $('.form-group').length;
    var numberOfHasSuccess = $('.has-success').length;
    if (numberOfHasSuccess === numberOfFormGroups) {
      $('.btn').removeAttr('disabled');
    } else {
      $('.btn').attr('disabled');
    }
  });

});

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-sm-offset-3">
        <h1>Shipping address</h1>

        <form role="form">
          <div class="form-group">
            <label class="control-label" for="first_name">First name</label>
            <input type="text" class="form-control " name="first_name" id="first_name" placeholder="John">
          </div>
          <div class="form-group">
            <label class="control-label" for="last_name">Last name</label>
            <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Doe">
          </div>
          <div class="form-group">
            <label class="control-label" for="address">Address</label>
            <textarea class="form-control" name="address" id="address" rows="2" placeholder="1, Infinite Loop"></textarea>
          </div>
          <div class="form-group">
            <label class="control-label" for="country">Country</label>
            <input type="text" class="form-control" name="country" id="country" placeholder="France">
          </div>
          <div class="form-group">
            <label class="control-label" for="zip_code">Zip code</label>
            <input type="text" class="form-control" name="zip_code" id="zip_code" placeholder="75001">
          </div>
          <div class="form-group">
            <label class="control-label" for="city">City</label>
            <input type="text" class="form-control" name="city" id="city" placeholder="Paris">
          </div>
          <div class="form-group">
            <label class="control-label" for="email">Email address</label>
            <input type="email" class="form-control" name="email" id="email" placeholder="john@doe.com">
          </div>
          <div class="form-group">
            <label class="control-label" for="mobile_phone">Mobile Phone</label>
            <input type="text" class="form-control" name="mobile_phone" id="mobile_phone" placeholder="0601020304">
          </div>
          <button type="submit" class="btn btn-primary" disabled>
            Please fill all fields
          </button>
        </form>

      </div>
    </div>
  </div>

  <footer style="height: 7em"></footer>

  <!-- Including jQuery from the Google CDN -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <!-- Including your code -->
  <script src="form_validation.js"></script>
</body>
</html>

## style.css
body {
  background-color: #F9F9F9;
}

.form-control {
  border-width: 5px;
  height: inherit;
}

.has-success .control-label {
  color: #4caf50;
}

.has-success .form-control {
  border-color: #4caf50;
}

.has-success .form-control:focus {
  border-color: #388e3c;
}


.has-error .control-label {
  color: #ff5252;
}

.has-error .form-control {
  border-color: #ff5252;
}

.has-error .form-control:focus {
  border-color: #DD4747;
}


footer {
  height: 7em;
}
	// Your validation code will go in there.
	// Write your validation functions, and bind events
	// in a jQuery DOM ready callback

	$(document).ready(function() {
	var events = "blur keyup"
	$(".form-control").on(events, function() {
	var value = $(this).val();
	if (value === "") {
	$(this).parent().removeClass('has-success').addClass('has-error');
	} else {
	$(this).parent().removeClass('has-error').addClass('has-success');
	};

	var regexps = {
	email: /.@.\..*/,
	zip_code: /^\d{5}$/,
	mobile_phone: /^\d{10}$/
	};

	if (Object.keys(regexps).includes($(this).attr('id'))) {
	var reg = regexps[$(this).attr('id')];
	if (reg.test(value)) {
	$(this).parent().removeClass('has-error').addClass('has-success');
	} else {
	$(this).parent().removeClass('has-success').addClass('has-error');
	};
	};

	var numberOfFormGroups = $('.form-group').length;
	var numberOfHasSuccess = $('.has-success').length;
	if (numberOfHasSuccess === numberOfFormGroups) {
	$('.btn').removeAttr('disabled');
	} else {
	$('.btn').attr('disabled');
	}
	});

	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Form Validation</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-xs-12 col-sm-6 col-sm-offset-3">
	<h1>Shipping address</h1>

	<form role="form">
	<div class="form-group">
	<label class="control-label" for="first_name">First name</label>
	<input type="text" class="form-control " name="first_name" id="first_name" placeholder="John">
	</div>
	<div class="form-group">
	<label class="control-label" for="last_name">Last name</label>
	<input type="text" class="form-control" name="last_name" id="last_name" placeholder="Doe">
	</div>
	<div class="form-group">
	<label class="control-label" for="address">Address</label>
	<textarea class="form-control" name="address" id="address" rows="2" placeholder="1, Infinite Loop"></textarea>
	</div>
	<div class="form-group">
	<label class="control-label" for="country">Country</label>
	<input type="text" class="form-control" name="country" id="country" placeholder="France">
	</div>
	<div class="form-group">
	<label class="control-label" for="zip_code">Zip code</label>
	<input type="text" class="form-control" name="zip_code" id="zip_code" placeholder="75001">
	</div>
	<div class="form-group">
	<label class="control-label" for="city">City</label>
	<input type="text" class="form-control" name="city" id="city" placeholder="Paris">
	</div>
	<div class="form-group">
	<label class="control-label" for="email">Email address</label>
	<input type="email" class="form-control" name="email" id="email" placeholder="john@doe.com">
	</div>
	<div class="form-group">
	<label class="control-label" for="mobile_phone">Mobile Phone</label>
	<input type="text" class="form-control" name="mobile_phone" id="mobile_phone" placeholder="0601020304">
	</div>
	<button type="submit" class="btn btn-primary" disabled>
	Please fill all fields
	</button>
	</form>

	</div>
	</div>
	</div>

	<footer style="height: 7em"></footer>

	<!-- Including jQuery from the Google CDN -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

	<!-- Including your code -->
	<script src="form_validation.js"></script>
	</body>
	</html>
	body {
	background-color: #F9F9F9;
	}

	.form-control {
	border-width: 5px;
	height: inherit;
	}

	.has-success .control-label {
	color: #4caf50;
	}

	.has-success .form-control {
	border-color: #4caf50;
	}

	.has-success .form-control:focus {
	border-color: #388e3c;
	}



	.has-error .control-label {
	color: #ff5252;
	}

	.has-error .form-control {
	border-color: #ff5252;
	}

	.has-error .form-control:focus {
	border-color: #DD4747;
	}



	footer {
	height: 7em;
	}