yafov example

jafov-demo.js

$(document).ready(function () {
    // add custom method
    $.yafov.addMethod('[type="tel"]', 'telfoobar', function (value, element, cb) {
        // imagine that this is an ajax call, and the function is the callback
        setTimeout(function () {
            var isValid = value !== '123';
            cb(isValid);
        }, 1000);
    });
    $.yafov.setMessage('telfoobar', 'value shouldn\'t be 123');

    // add a custom group validator
    // that going to handle 3 elements as one
    $.yafov.addGroupMethod(
        '.datetest',
        'datetest',
        /**
         * that method will do the validation
         * the elements variable will contain all elements of the group
         * the elements are collected by the function what you need to pass as
         * the 4th argument
         * The value argument here doesn't make too much sense..
         */
        function datetestGroupValiadator(value, elements, cb) {
            // presume that the field is valid
            var valid = true,
                year, month, day,
                date, now;
            // check for the format of the fields, everything should be number
            // you may wan't to make it more strict, but it's OK for now
            elements.each(function () {
                valid = valid && this.value !== '' && !isNaN(+this.value);
            });
            // if the format is OK, check the actual value
            if (valid) {
                // get the values
                year = elements.filter('.year').val();
                month = elements.filter('.month').val();
                day = elements.filter('.day').val();

                // create date objects what we will compare
                date = new Date();
                now = new Date();

                // set year, month and day
                date.setFullYear(year);
                date.setMonth(month - 1);
                date.setDate(day);

                // compare the dates, if date.getTime() is greater then
                // now.getTime() the entered date should be ok
                valid = date.getTime() > now.getTime();
            }
            cb(valid);
        },
        /**
         * collects all elements which belongs to the group
         * has one parameter, which is the reference to a element from the
         * group as a jQuery object
         */
        function datetestGetGroupItems(elem) {
            // in that example we keep the elements of a group in a div which has a "row" class
            var form = elem.form || elem.closest('.row'),
                elements;

            // collect all elements with datest class in the row div
            elements = form.find('.datetest');
            return elements;
        }
    );
    $.yafov.setMessage('datetest', 'The date must be later than today');

    // Initialize the validator
    var validator = $('#NewTypes').yafov({
        // Example how you can overwrite the default onInvalidFound event
        // handler with your own
        // Added some logging then call the original one which will place the error messages
        onInvalidFound: function (e, error) {
            if (window.console && window.console.log) {
                // window.console.log(error);
            }
            $.yafov.onInvalidFound(e, error);
        }

    });

    // Listen to formvalid event and submit the form
    validator.bind($.yafov.events.FORM_VALID, function (e, args) {
        // this.submit();
        $('#Messages').text('the form is valid').addClass('hasMessage');
    });

    // Listen to forminvalid and do nothing now :) You may wan't to log the issues
    validator.bind($.yafov.events.FORM_INVALID, function (e, args) {
        $('#Messages').text('the form is invalid').addClass('hasMessage');
        // scroll to the first invalid element
        window.scrollTo(0, args.errors[0].field.parent().position().top - 10);
    });

    // When user clicks on #TelValidate button only one validator method will
    // be called only on one field and the callback will put a message into the
    // Messages div
    $('#TelValidate').click(function () {
        $.yafov.validateWith($('#TelTest'), 'required', function (isValid) {
            var msg = 'The tel field is valid';
            if (isValid) {
                msg = 'The tel field is invalid';
            }
            msg += '<br />Using the <code>$.yafov.validateWith</code> method, you can check if a field passes a (only one) validator method, but it won\'t trigger any events, you must handle everything in the callback method.';
            $('#Messages').html(msg).addClass('hasMessage');
            // scroll back to the message, so the user can see it
            window.scrollTo(0, $('#Messages').closest('form').position().top);
        });
    });
    // When user clicks on #ForceTelValidate button all validator methods will
    // be called only on one field and the callback will put a message into the
    // #Messages div
    $('#ForceTelValidate').click(function () {
        $.yafov.validate($('#TelTest'), function (result) {
            var msg = 'The tel field is valid';
            if (result.isValid) {
                msg = 'The tel field is invalid'; 
            }
            msg += '<br />Using the <code>$.yafov.validate</code> method, you can check if a field passes all validations, and validfound or invalidfound events will be triggered.';
            $('#Messages').html(msg).addClass('hasMessage');
            // scroll back to the message, so the user can see it
            window.scrollTo(0, $('#Messages').closest('form').position().top);
        });
    });
});