View on GitHub

Jsv api : Easy and powerful form validation

Download this project as a .zip file Download this project as a tar.gz file

Why JSV_API ?

When you create a website, you often have to deal with HTML forms. Those forms might need data validation, like :

Long story short, this plugin allows you validate you data both on the client and the server side (if needed), with the same rules. But that's not all, you can add events on any part of the validation process, which makes the API suit a lot of needs.

The API contains several validation rules 'out-of-box', based on the Java JSR 303 (validation API), but you can extend them and create any new validation you like, in a blink of an eye.

Who can use JSV_API ?

Anyone who works on websites. Yes, I mean anyone. This plugin can validate anything you need as long as you have an HTML Form, regardless the language used to generate the form. The core is written in JS, but we have Java plugins, and we plan to add others later. So if you have at least one HTML form in your website, give it a try !

Which problems does JSV_API solve ?

Client-side validation

Depending on what client-side framework you use, you may (or may not !) have a built-in validation API. While most of them may be great, you are sometimes limited to what you can validate. JSV_API lets you create any kind of validation you need.

Event handeling

When you validate things, you may want to add custom behaviour before or after the fields are actually validated. JSV_API provides a simple way to do that. There is 3 kinds of events you can use :

Server-side validation

Client side data validation is great because it prevents the whole form to be sent and the page to be refreshed in order to verify the data, and thus saves bandwidth. But as it is mainly javascript, one could quite easily alter your validation code, and send erroneous data anyway to your server. If you want to prevent that, you'll need a server-side validation as well.

But this is where the fun ends : why should you write both the client-side and the server-side validation code in different languages ? Why should you write them at least twice anyway ? JSV_API helps you with that, by fetching validation rules on the server, and applying them to the client. If a user wants to temper with that code ? Fine, same validation on server

Quick start

Here you go, ready to use it. In order to minimise the overall output, we'll use the following HTML for all code snippets :

<html>
    <head>
        <title>JSV Documentation</title>
    <head>
    <body>
        <form action="/send" method="POST" id="FormBean">
            <div>
                <label for="firstname">Firstname: </label>
                <input type="text" name="firstname" />
            </div>
            <div>
                <label for="sex">Sex: </label>
                <select name="sex">
                    <option value="M">Male</option>
                    <option value="F">Female</option>
                </select>
            </div>
            <div>
                Choose 2 interests:
                <label><input type="checkbox" name="interest" /> Sport</label>
                <label><input type="checkbox" name="interest" /> Computer science</label>
                <label><input type="checkbox" name="interest" /> Music</label>
            </div>
            <div>
                <input type="submit" value="Send" />
            </div>
        </form>
        <script type="text/javascript" src="jsv.js"></script>
        <script type="text/javascript">
            <!-- Example code will be placed here -->
        </script>
    </body>
</html>

In this code, right after the "form" part, you can see our validation engine being imported :

<script type="text/javascript" src="jsv.js"></script>

Simple client-side validation

The quick example shows you how to check if the 'firstname' field is not empty. That's it !

<script type="text/javascript">
    jsValidator = new JSValidator('myFormId',
        new Array(
            new JSValidator.Rule('firstname', 'NotNull', {'message': 'Firstname should not be empty'})
        )
    );
</script>

In this constructor, you'll need to provide the HTML form's id, and an array of Validation Rules. Those contain 3 parts:

Since you have your validator configured, you now have to tell it when to validate each field in your form (on the submission, for instance) :

jsValidator.bindValidationToElement("FormBean", "submit", true).bindFields(jsValidator.getFields());

That's it. To display the validation errors, you have 2 choices (you can use both at the same time) :

    <div id="FormBean_errors">
        <!-- Displays global errors -->
    </div>

    <div class="ctrl-holder">
        <label for="firstname">
            Firstname
        </label>
        <input id="firstname" name="firstname" type="text" value="">

        <div id="firstname_error" class="error">
            <!-- Displays field errors -->
        </div>
    </div>

Demos

Authors