Validator - Documentation | www.HtmlElements.com

Overview

The Validator validates the inputs on the page, by predefined rules, passed to the class as a first parameter.

Initialization

A Validator object can be instantiated by calling the Validator class constructor with a single parameter with rules. The parameter type must be array of objects and each member of the "rules" array can contains these fields:

  • input [String] - Contains the selector of the input, which requires validation
  • message [String] - The error message text, visible if the input is invalid.
  • action [String] - Describes the events, applied on the input. You can use all the standard javascripts events, to control when the validation will start.
  • type [String] - Describes the validation type
    • "required" - Checks if the input is not empty
    • "notNumber" - Checks if the input value is not numeric
    • "startWithLetter" - Checks if the input value starts with letter
    • "numeric" - Checks if the input value is numeric
    • "phone" - Checks the input value for valid phone number /if this format doesn't work for your country, you should try type: 'pattern'/
    • "stringLength" - Validates the length of input value. To work properly, you should pass also min and max properties
    • "pattern" - Checks if the input value matches the pattern from the pattern property
    • "compare" - Checks if the input value matches the result of the user defined function, declared in the comparisonTarget property
    • "custom" - Custom validation, that executes the user defined function in the validationCallback property.
    • "email" - Checks if the input value is valid email
    • "zipCode" - Checks if the input value is valid zip code
    • "ssn" - Checks if the input value is valid ssn
The Validator class accepts also second parameter - string selector of the container, where all the error messages for invalid inputs will be printed.

Here is how to validate simple form in your code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-bundle.js"></script>
    <script type="text/javascript" src="../../source/smart.element.js"></script>
    <script type="text/javascript" src="../../source/smart.validator.js"></script>
    <script type="text/javascript" src="../../source/smart.date.js"></script>
    <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
    <script type="text/javascript" src="../../source/smart.button.js"></script>
    <script type="text/javascript" src="../../source/smart.tooltip.js"></script>
    <script type="text/javascript" src="../../source/smart.listbox.js"></script>
    <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script>
    <script type="text/javascript" src="../../source/smart.combobox.js"></script>
    <script type="text/javascript" src="../../source/smart.textbox.js"></script>
    <script type="text/javascript" src="../../source/smart.passwordtextbox.js"></script>

    <script type="text/javascript">
        window.onload = function () {
            'use strict';

            const rules = [
                { input: '#userInput', message: 'Username is required!', action: 'keyup, blur', type: 'required' },
                { input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', type: 'stringLength', min: 3, max: 12 },
                { input: '#passwordInput', message: 'Password is required!', action: 'keyup, blur', type: 'required' },
                { input: '#passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', type: 'stringLength', min: 4, max: 12 },
                { input: '#passwordConfirmInput', message: 'Confirm Password is required!', action: 'keyup, blur', type: 'required' },
                { input: '#passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus', type: 'custom',
                    validationCallback: function (input) {
                        if (input.value === document.querySelector('#passwordInput').value) {
                            return true;
                        }
                        return false;
                    }
                }
            ];

            const validator = new Smart.Utilities.Validator(rules, '#validationsummary');
            document.querySelector('#submitFormButton').addEventListener('click', () => {
                validator.validate();
            });
        }
    </script>

    <style>
        .demo-container {
            max-width: 750px;
            margin-left: 10px
        }

        .field {
            margin-left: 10px;
            min-height: 36px;
            margin-bottom: 10px;
        }

        .field .field-label {
            float: left;
            width: 30%;
            padding-top: 5px;
        }

        .field .field-value {
            width: 70%;
            float: right;
        }

        .field .field-value > :first-child:not(.error-holder) {
            width: 100%;
        }

        .fieldset #submitFormButton {
            width: 100%;
        }

        #validationsummary {
            clear: both;
            padding-top: 10px;
        }

        #validationsummary span {
            display: block;
            color: #d9534f;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <form>
            <div class="field">
                <div class="field-label">User name</div>
                <div class="field-value">
                    <smart-text-box select-all-on-focus placeholder="User name" id="userInput"></smart-text-box>
                </div>
            </div>
            <div class="field">
                <div class="field-label">Your password</div>
                <div class="field-value">
                    <smart-password-text-box select-all-on-focus placeholder="Your password" id="passwordInput"></smart-password-text-box>
                </div>
            </div>
            <div class="field">
                <div class="field-label">Confirm password</div>
                <div class="field-value">
                    <smart-password-text-box select-all-on-focus placeholder="Confirm password" id="passwordConfirmInput"></smart-password-text-box>
                </div>
            </div>
            <div class="fieldset">
                <div id="registerButton" class="submit-button">
                    <smart-button id="submitFormButton" type="button" class="success">Send</smart-button>
                </div>
            </div>
        </form>
        <div id="validationsummary"></div>
    </div>
</body>
</html>

Here is how to validate input with custom pattern:

const rules = [
    { input: '#phone-validation', message: 'The phone must have a correct USA phone format', action: 'valuechanged, blur', type: 'pattern', pattern: /^\+\s*1\s*\(\s*[02-9]\d{2}\)\s*\d{3}\s*-\s*\d{4}$/ },
];

const validator = new Smart.Utilities.Validator(rules);
validator.validate();

Here is example how to use the 'custom' type property:

const rules = [
    { input: '#birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2025.', action: 'change', type: 'custom', validationCallback: function () {
            var date = document.querySelector('#birthInput').value;
            var result = date.year() >= 1900 && date.year() <= 2025;
            return result;
        }
    }
];

const validator = new Smart.Utilities.Validator(rules);
validator.validate();

Public methods

Method Description
attach() Attach method adds the event listeners
detach() Removes all the event listeners
reset() Clears the error messages
validate() Validates all the inputs