jQuery Validate #

It provides valuable, actionable feedback to your users with HTML5 form validation.

How it works #

Here is how the jQuery Validate works with Fluxo:

• Validate will find the form element with .form-validate class.
• Validation settings for each input, select, or textarea could be find/set on wb.validate-init.js file.
• .form--invalid or .form-valid class will be applied to the element that has been specified .

How to Use #

Copy-paste the following <script> near the end of your pages under <!-- Vendor/Plugins JS --> to enable Validate.

<script src="js/vendor/jquery.validate.min.js"></script>

Copy-paste the following <script> near the end of your pages under <!-- Vendor/Plugins JS Init --> to initialize it.

<script src="js/init/wb.validate-init.js"></script>

To specify the validation rules on your form, you have to set name attribute to the fields that you want to be applied. For example, on the Contact form you want to apply validate on First Name, Email, and Message fields, please take a look at the example init code below:

$(".form-validate").validate({
// Specify validation rules
rules: {
  // The key name on the left side is the name attribute
  // of an input field. Validation rules are defined
  // on the right side
  firstName: "required",
  email: {
    required: true,
    // Specify that email should be validated
    // by the built-in "email" rule
    email: true
  },
  message: "required"
},
// Specify validation error messages
messages: {
  firstName: "Please enter your first name ",
  email: "Please enter a valid email address",
  message: "Please enter your message"
},
errorClass: "input--invalid",
validClass: "input--valid",
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
  form.submit();
}
});

Form Example #

<form action="#" class="contact-form form-validate">
  <div class="row">
    <div class="col-sm-6 mb-3">
      <div class="form-group">
        <label class="required-field" for="firsName">First Name</label>
        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Wendy">
      </div>
    </div>

    <div class="col-sm-6 mb-3">
      <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Appleseed">
      </div>
    </div>

    <div class="col-sm-6 mb-3">
      <div class="form-group">
        <label class="required-field" for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email" placeholder="wendy.apple@seed.com">
      </div>
    </div>

    <div class="col-sm-6 mb-3">
      <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel" class="form-control" id="phone" name="phone" placeholder="(021)-454-545">
      </div>
    </div>

    <div class="col-sm-12 mb-3">
      <div class="form-group">
        <label class="required-field" for="message">How can we help?</label>
        <textarea class="form-control" id="message" name="message" rows="4" placeholder="Hi there, I would like to....."></textarea>
      </div>
    </div>

    <div class="col-sm-12 mb-3">
      <button type="submit" name="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>