Atmos
  • Getting Started
  • Build System
    • Gulp
      • Gulp 4
    • Page Structure
    • Sass Modules
  • UI Elements
    • Colors
    • Buttons
    • Icons
    • Cards
    • Alerts
    • Modals
    • Avatar
    • Tables
    • Mail Templates
  • forms
    • Form Layouts
    • Switch
    • Tag Input
    • Radio Box
    • Select2
    • Datepickers
    • Masked Input
    • Rangeslider
    • Dropzone Fileupload
    • Form Wizard
    • Form Validation
  • Charts
    • Charts
    • Apex Charts
    • Chartjs
    • Google Charts
    • Chartist
  • Maps
    • Google Maps
    • Vector Maps
  • Starter Template
    • blank template Markup
Powered by GitBook
On this page
  1. forms

Form Validation

PreviousForm WizardNextCharts

Last updated 6 years ago

plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup.

Step 1

Add JavaScript file before end body tag

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

Step 2

Add Markup

<form class="needs-validation" action="#">
    <div class="form-row">
        <div class="form-group floating-label col-md-12">
            <label>Email</label>
            <input type="email" required class="form-control" placeholder="Email">
        </div>
        <div class="form-group floating-label col-md-12">
            <label>Password</label>
            <input type="password" required class="form-control " id="password"
                   placeholder="Password">
        </div>
    </div>
    <button type="submit" class="btn btn-primary btn-block btn-lg">Login</button>
</form>

Step 3

Initialize the Plugin

$(".needs-validation").validate({
        errorClass: "is-invalid",
        validClass: "is-valid",
    });
jQuery Validation
jQuery Validation PluginjQuery Validation Plugin