Parsley.js and Twitter Bootstrap

By Jimmy Bonney | May 9, 2013

Parsley

Parsley.js is a (quite) new library allowing to perform Javascript form validation – but without writing any Javascript. Validation is performed through instructions embedded in the DOM, in some data attributes to be more precise.

It comes up with a pretty extensive documentation and allows for easy customization. In this article, we’ll highlight how to use it in combination with Twitter Bootstrap - so that we do not need to write any custom CSS (or let’s say a limited amount depending on what you want to achieve).

Let’s have a look at what it will look like.

Parsley with Bootstrap

The error messages are written next to the input fields instead of below so that the form does not expand downwards on validation. In order to do that, we’ll need to explicitly call Parsley on the form and customize a few things, nothing complicated but this means that we’ll actually have to write a bit of Javascript.

Since we are going to customize Parsley to fit with the Bootstrap way of marking things, it is necessary not to include the parsley validation in the form markup. So do not add data-validate="parsley" in the form tag and instead add novalidate="novalidate" so that HTML5 validation is not performed.

Here is the code corresponding to the screenshot above. It is just standard HTML markup with the necessary Bootstrap classes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post" novalidate="novalidate">
    <fieldset>
        <div class="control-group">
            <label for="user_name">Name</label>
            <div class="form-inline">
                <div class="controls">
                    <input data-notblank="true" data-required="true" id="user_name" name="user[name]" placeholder="J. Doe" size="30" type="text" />
                </div>
          </div>
        </div>
        <div class="control-group ">
            <label for="user_email">Email</label>
              <div class="form-inline">
                  <div class="controls">
                      <input data-notblank="true" data-required="true" data-type="email" id="user_email" name="user[email]" placeholder="jdoe@example.com" size="30" type="email" value="" />
                  </div>
            </div>
        </div>
        <div class="control-group">
            <label for="user_password">Password</label>
            <div class="form-inline">
                <div class="controls">
                    <input data-minlength="6" data-notblank="true" data-required="true" id="user_password" name="user[password]" placeholder="min. 6 characters" size="30" type="password" />
                </div>
            </div>
        </div>
        <div class="control-group">
            <label for="user_password_confirmation">Password confirmation</label>
            <div class="form-inline">
                <div class="controls">
                    <input data-equalto-message="The password confirmation should match the password" data-equalto="#user_password" data-required="true" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
                </div>
            </div>
        </div>
        <div class="">
            <input class="btn btn-primary" name="commit" type="submit" value="Sign up" />
        </div>
    </fieldset>
</form>

<!-- Load the JS -->
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/parsley.js?body=1" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#new_user').parsley({
            successClass: 'success',
            errorClass: 'error',
            errors: {
                classHandler: function(el) {
                    return $(el).closest('.control-group');
                },
                errorsWrapper: '<span class=\"help-inline\"></span>',
                errorElem: '<span></span>'
            }
        });
    });
</script>

Note the Javascript at the end of the file. Parsley is called on the #new_user form and we configure it to use the usual success and error classes defined by Bootstrap. In addition, we apply the error class on the closest control-group element, exactly as Bootstrap needs. Finally, we override the error wrapper and error elements (by default respectively <ul></ul> and <li></li>) in order to use a span that will appear inline with the input.

The final touch is actually to add some CSS in order for the red background to appear on the input field when an error is detected. This is done with the following code:

1
2
3
4
5
.control-group.error input.parsley-validated{
    color: #b94a48 !important;
    background-color: #f2dede !important;
    border: 1px solid #EED3D7 !important;
}

All the code above is actually the output of a Rails application. If you’d like to see the original source code, have a look at this gist.


For the time being, comments are managed by Disqus, a third-party library. I will eventually replace it with another solution, but the timeline is unclear. Considering the amount of data being loaded, if you would like to view comments or post a comment, click on the button below. For more information about why you see this button, take a look at the following article.