Form Validation

We used the most trusted plugin for validation which is Jquery Validation plugin.

How to use Form Validation?

1. Add specific javascript

Add inside body at the end of your page, before main template scripts:

<script src="assets/plugins/jquery-validation/jquery.validate.min.js"></script> <!-- Form Validation -->
<script src="assets/plugins/jquery-validation/additional-methods.min.js"></script> <!-- Form Validation Additional Methods - OPTIONAL -->

2. Create your form

Add html markup for your form with form-validation class. Here is a simple example:

 <form role="form" class="form-validation">
    <div class="form-group">
        <label class="control-label">Firstname</label>
        <input type="text" class="form-control" minlength="3" required>
    </div>
    <div class="form-group">
        <label class="control-label">Lastname</label>
        <input type="text" class="form-control" minlength="4" required>
    </div> 
    <button type="submit" class="btn btn-embossed btn-primary">Sign Up</button>
</form>

3. That's it!

Plugin will automatically validate form that have form-validation class.

We have added specific message, depending of your input data.

You just have to specify name of your input. For example, if you want first name, you will have this markup:

<input type="text" name="firstname" class="form-control" minlength="3" required>

Here we say that this field is required, we want a minimum of 3 characters and we want first name.

So, if input is empty, a speficic message will say: "Enter your first name".

You can of course change message or add new one by change element in formValidation() function in assets/js/plugins.js file.