QuickValidate

by elclanrs

HTML

<form>
    <p><label>Name <span>*</span>:</label><input type="text" class="required name"/></p>
    <p><label>Password <span>*</span>:</label><input type="password" class="required pass"/></p>
    <p><label>E-Mail:</label><input type="text" class="email"/></p>
    <p><label>Phone:</label><input type="text" class="phone" placeholder="999-999-9999"/></p>
    <p><label>&nbsp;</label><button type="submit">Submit</button></p>
</form>
<p>This is an example for the Onextrapixel tutorial: <a href="http://www.onextrapixel.com/2012/05/09/quickvalidate-building-a-jquery-validation-plugin/">QuickValidate: Building a jQuery Validation Plugin</a><br/>
Check out full version at <a target="_blank" href="https://github.com/elclanrs/jq-idealforms">github</a>.</p>

CSS

body { 
    margin: 50px;
    font: normal 15px/1.5 Arial;
}
p { 
    float: left;
    clear: both;
    position: relative;
    margin: .5em 0; 
}
label, input { display: inline-block; }
label { width: 100px; }
label span { color: red; }
input { 
    padding: 0 .3em; 
    height: 24px;
    line-height: 24px;
    width: 200px;
    border: 1px solid #ccc;
}
input.invalid {
    background: #FFFAC4;
}
.error-icon {
    position: absolute;
    top: 0;
    right: -32px;
    height: 24px;
    width: 24px;
    background: url(http://i43.tinypic.com/dbsh3m.png) no-repeat;
    cursor: pointer;
}
.error {
    display: none;
    position: absolute;
    top: 10px;
    right: -195px;
    z-index: 999;
    padding: 10px;
    width: 120px;
    font-size: 12px;
    background: #222;
    color: white;
}
.error:after {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent #222 transparent transparent;
}

JavaScript

$.fn.quickValidate = function() {
    var $form = this,
        $inputs = $form.find('input:text, input:password');
    var filters = {
        name: {
            regex: /^[A-Za-z]{3,}$/,
            error: 'Must be at least 3 characters long, and must only contain letters.'
        },
        pass: {
            regex: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,
            error: 'Must be at least 6 characters long, and contain at least one number, one uppercase and one lowercase letter.'
        },
        email: {
            regex: /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/,
            error: 'Must be a valid e-mail address (user@gmail.com)'
        },
        phone: {
            regex: /^[2-9]\d{2}-\d{3}-\d{4}$/,
            error: 'Must be a valid US phone number (999-999-9999)'
        }
    };
    var validate = function(klass, value) {
        var isValid = true,
            error = '';
        if (!value && /required/.test(klass)) {
            error = 'This field is required';
            isValid = false;
        } else {
            klass = klass.split(/\s/);
            $.each(klass, function(i, k){
                if (filters[k]) {
                    if (value && !filters[k].regex.test(value)) {
                        isValid = false;
                        error = filters[k].error;
                    }
                }
            });
        }
        return {
            isValid: isValid,
            error: error
        }
    };
    var printError = function($input) {
        var klass = $input.attr('class'),
            value = $input.val(),
            test = validate(klass, value),
            $error = $('<span class="error">' + test.error + '</span>'),
            $icon = $('<i class="error-icon"></i>');

        $input.removeClass('invalid').siblings('.error, .error-icon').remove();

        if (!test.isValid) {
            $input.addClass('invalid');
            $error.add($icon).insertAfter($input);
           ...