Skip to content

Using Validatinator

Jump to bottom Edit New page
David edited this page Jan 20, 2014 · 1 revision

Instantiating A Validatinator Object

Creating an instance of the Validatinator constructor is quite simple, all you have to do is pass in an object literal containing properties named after your form's name attribute. Now assign that property to another object literal containing properties named after each of your form's field's name attribute and assign those properties to a string value that contains each validation method that is pipe-character delimited.

Here's a quick example:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <form name="my-forms-name-attribute">
            <input type="text" name="my-fields-name-attribute">
            <input type="text" name="i-am-another-field-in-the-above-form">
            <button type="submit">Submit Form</button>
        </form>
        
        <form name="i-am-another-form">
            <input type="text" name="i-am-a-field-in-the-new-form">
            <button type="submit">Submit Second Form</button>
        </form>
        
        <script type="text/javascript" src="./js/Validatinator.min.js"></script>
        <script type="text/javascript">
            var validatinator = new Validatinator({
                "my-forms-name-attribute": {
                    "my-fields-name-attribute": "required|min:5|max:20",
                    "i-am-another-field-in-the-above-form": "required|between:20,30",
                },
                "i-am-another-form": {
                    "i-am-a-field-in-the-new-form": "required|alphaNum",
                }
            });
        </script>
    </body>
</html>

To get a list of all currently available validation methods then head over HERE.

Validating The Form

When validating the form you can either call the passes or fails method; they return a boolean value depending on if they pass or fail. When calling passes or fails method you need to make sure you pass in the form's name that you wish to validate against, without this the calling method will pass back an error stating it does not know which form to validate against.

Here's another quick example showing how to call the validation methods. We will use the variable defined above for this example as it already holds a Validatinator object:

if (validatinator.passes("my-forms-name-attribute")) {
    // Do something here because the form passed validation!
}

if (validatinator.fails("i-am-another-form")) {
    // The form failed validation; do something here to show that to the user!
}

Getting Validation Error Messages

After running a form through one of the validation methods and if the form failed validation you can access the errors property on your Validatinator Object to retrieve all of the validation error messages. The errors property will have a similar layout as when you instantiated Validatinator.

if (validatinator.fails("i-am-another-form")) {
    console.log(validatinator.errors);
}

// The above would output the following if all validation methods failed.
{
    "i-am-another-form": {
        "i-am-a-field-in-the-new-form": {
            "required": "This field is required.",
            "alphaNum": "This field only allows alpha, dash, underscore and numerical characters."
        }
    }
}
Add a custom footer
Add a custom sidebar
Clone this wiki locally