> For the complete documentation index, see [llms.txt](https://docs.atomui.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.atomui.com/form-elements/form-validation.md).

# Form Validation

[jQuery Validation](https://jqueryvalidation.org/) 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

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

#### Step 2

Add Markup

```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

```javascript
$(".needs-validation").validate({
        errorClass: "is-invalid",
        validClass: "is-valid",
    });
```

{% embed url="<https://jqueryvalidation.org/>" %}