Форма с полями обязательными к заполнению

by Misha Ivannikov

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<form name="formmName" class="autoCheck">
<table>
    <tr>
        <th>Имя</th>
        <td><input type="text" class="email" value="" alt="Имя" name="firstName" /></td></tr>
    <tr>
        <td colspan="2"><input type="submit" name="" value="Submit" /></td></tr>
</table>
</form>

CSS

.fail{ background-color: #FF9C9C; }
.ok{ background-color: #BDFFCA; }

JavaScript

jQuery(function($) {
    $.widget('ui.formChecker', {
        options: {
            classCheck: '',
            classFail: '',
            classOK: ''
        },
        _create: function() {

            var self = this,
                elem = $(self.element),
                o = self.options;

            elem.on('submit', function(e) {
                if (self._check(elem) === false) {
                    elem.find('input.' + o.classFail + ':first').focus();
                    e.preventDefault();
                    self._trigger('onfail');
                    return false;
                }
            });
        },
        _check: function(elem) {
            var o = this.options,
                check = true;
            $.each(elem.find('input.' + o.classCheck), function() {
                if ($.trim(this.value) === '') {
                    check = false;
                    $(this).removeClass(o.classOK).addClass(o.classFail);
                } else {
                    $(this).removeClass(o.classFail).addClass(o.classOK);
                }
            });
            return check;
        }
    });

    $('form.autoCheck').formChecker({
        classCheck: 'email',
        classOK: 'ok',
        classFail: 'fail',
        onfail : function(){
         $($(this).attr('info')).html('Fail!!!');
        }
    });
});