Check Form Demo

HTML

<script src="https://mike96angelo.github.io/Form/src/check-form.js"></script>
<form id="signup">
    <div class="row">
        <label for="given_name">Given Name</label>
        <input id="given_name" name="given_name" />
    </div>
    <div class="row">
        <label for="surname">Surname</label>
        <input id="surname" name="surname" />
    </div>
    <div class="row">
        <label for="email">Email</label>
        <input id="email" name="email" />
    </div>
    <div class="row">
        <label for="username">Username</label>
        <input id="username" name="username" />
    </div>
    <div class="row">
        <label for="password">Password</label>
        <input id="password" name="password" />
    </div>
    <div class="row">
        <button type="submit" name="submit">Signup</button>
    </div>
</form>

JavaScript

var EMAIL = /^[A-Za-z][A-Za-z0-9]{2,}[@][A-Za-z0-9\-]+[.][A-Za-z0-9]{2,}$/;

function validName(validation) {
    var value = (validation.value||'').trim();
    var valid = /^[A-Za-z][A-Za-z\-]{2,}$/.test(value);

    validation.setValidation({
        valid: valid,
        value: value,
        message: valid ? '' : validation.key + ' must not contain non-letter characters.'
    });
}

var signupForm = new Form({
    fields: {
        given_name: validName,
        surname: validName,
        email: function (validation) {
            var value = (validation.value||'').trim();
            var valid = EMAIL.test(value);

            validation.setValidation({
                valid: valid,
                value: value,
                message: valid ? '' : 'invalid email.'
            });
        },
        username: function (validation) {
            var value = (validation.value||'').trim();
            var valid = /^[A-Za-z][A-Za-z0-9]{2,}$/.test(value);

            validation.setValidation({
                valid: valid,
                value: value,
                message: value.length < 3 ?
                'username must be at least 3 characters.' :
                valid ?
                '' :
                'username must not contain special characters.'
            });
        },
        password: function (validation) {
            var value = (validation.value||'');
            var valid = value.length >= 6;

            validation.setValidation({
                valid: valid,
                value: value,
                message: valid ?
                '' : 'password must be at least 6 characters.'
            });
        }
    },
    action: function (data, callback) {
        // do something with data
        alert('data '+JSON.stringify(data, null, 2));
				callback(/*err, res*/)
    },
    error: function (validations) {
        // do something with data
        alert('validations '+JSON.stringify(validations, null, 2));
   ...