Parsley Validation Example

by Marc-André Lafortune

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://rawgit.com/guillaumepotier/Parsley.js/master/dist/parsley.js"></script>
<form action="#">
    <label for="name">Name</label>
    <input type="text" name="name"
        data-parsley-minlength="5"
        data-parsley-required="true"
    />
    
    <label for="email">Email</label>
    <input type="text" name="email"
        data-parsley-required="true"
        data-parsley-type="email"
    />
    
    <section>
        <h3>Parity check</h3>
        <p>Enter two numbers of the same parity</p>
    </section>
    <button type="submit">Submit</button>
</form>

SCSS

body {
    padding: 20px;
}
input {
    display: block;
}
label {
    margin-top: 5px;
    display: block;
}

input.parsley-error {
    border: 1px solid red;
}

.parsley-error-list {
    color: red;
}

button {
    display: block;
    margin-top: 20px;
}

JavaScript

$('form').parsley()