Parsley JS + Bootstrap + jQuery

Simple form data validation. Parsley 2.8 + Boostrap 4 + jQuery 3.1

by Fernando Testa

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/css/tether.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.0/parsley.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/js/tether.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>

  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">

          <h1>Parsley JS + Bootstrap + jQuery</h1>
          <h2>Simple form data validation with:<br>
          Parsley 2.8 + Boostrap 4 + jQuery 3.1</h2>
          <br>
          <form data-parsley-validate="">
            <label for="fullname">Full Name * :</label>
            <input type="text" class="form-control" name="fullname" required="">

            <label for="email">Email * :</label>
            <input type="email" class="form-control" name="email" data-parsley-trigger="change" required="">

            <label for="gender">Gender *:</label>
            <p>
              M:
              <input type="radio" name="gender" id="genderM" value="M" required=""> F:
              <input type="radio" name="gender" id="genderF" value="F">
            </p>

            <label for="hobbies">Hobbies (Optional, but 2 minimum):</label>
            <p>
              Skiing
              <input type="checkbox" name="hobbies[]" id="hobby1" value="ski" data-parsley-mincheck="2">
              <br> Running
              <input type="checkbox"...

CSS

body {
  margin: 40px 0 40px;
}

h1 {
  font-size: 25px;
  color: #568FE6;
}

h2 {
  font-size: 22px;
  color: #B2B2B2;
}

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

JavaScript

$(document).ready(function() {

  /* var parsleyOptions = {
    // focusInvalid: false
   }; */

  $('form[data-parsley-validate]').each(function() {
    var $form = this;
    $(this).parsley().on('field:validated', function() {

      var errorCount = $('.parsley-error', $form).length;
      var formValid = errorCount === 0;

      $('.info-show', $form).html('Error count: ' + errorCount + ' - Form valid: ' + formValid);
      $('.bs-callout-ok', $form).toggleClass('d-none', !formValid);
      $('.bs-callout-warning', $form).toggleClass('d-none', formValid);

    }).on('form:submit', function() {
      return false; // Don't submit form for this demo
    });
  });
})