// objects that provide information about the object the

// name points to. 'default' property is required.

var defaultValues = {

    'fname': {'default':'Adınız'},

    'mname': {'default':'Atanızın adı'},

    'lname': {'default':'Soyadınız'},

    'phone': {'default':'Telefon'},

    'email': {'default':'Email'},

    'pwd': {

        'default':'Şifrə',

        // Text used to display a custom error text.

        // Otherwise, the default text will be used.

        'errortext':'Password must be 5 characters or more in length',

        // A custom function to be called when the element is validated

        // and/or checked for default. This is added as a custom event

        // handler called 'validation' and called on blur.checkRequired

        // and from the function checkRequired() when the 

        // blur.checkRequired is triggered. The 'notvalidated' data

        // element is how the validation failure is passed back to 

        // blur.checkDefault event.

        'onvalidation': function(){

            if (this.value.length < 5) {

                $(this).data('notvalidated',true);

            } else {

                $(this).data('notvalidated',false);

            }

        }

    },

    'region': {'default':'Rayon'},

    'school': {'default':'Məktəb'},

    'login': {'default':'Istifadəçi adı'},

    'class': {'default':'Sinif'},

    'subject': {'default':'Fənnin adını daxil edin'},

    'dob': {

        'default':'Date of Birth',

        // An alternate value to check for, in addition to

        // the default. More complex checks should be checked

        // through the onvalidation handler.

        'validate':'  .  .    ',

        'errortext':'A correct Date of Birth must be entered.'

    }

};

function checkRequired() {

    // We will attach the error list to the body tag.

    var $body = $('body');

    // This array will store the actual errors, but this specfically

    // clears previous errors caught.

    $body.data('requiredErrors',[]);

    $('input.required').each(function(){

        // Trigger is used to manually call the blur.checkRequired

        // handler.

        $(this).trigger('blur.checkRequired');

    });

    // Get a reference to the errors generated by the triggered

    // event handler.

    var errors = $body.data('requiredErrors');

    if (errors.length > 0) {

        // This will allow you output an error to the user.

        var errortext = "There were "+errors.length+" errors submitting the form.<br/>"+

            "These errors must be fixed before submitting the form."+

            "<ul>";

        for (var i = 0; i < errors.length; i++) {

            errortext += "<li>"+errors[i]+"</li>";

        }

        errortext += '</ul>';

        errortext = '<div id="requiredErrorsText">'+errortext+'</div>';

        // First try to remove it if it's already showing.

        $('#requiredErrorsText').remove();

        // At it to the top of the form.

        $(errortext).prependTo('form');

        // Return false to the submit event handler to prevent the form

        // from submitting.

        return false;

    }

    // Return true to allow the form to continue submitting.

    return true;

}

$(document).ready(function(){

    // Set the initial errors log array.

    $('body').data('requiredErrors',[]);

    // Loop through and apply the defaultValues object information

    // to the related elements.

    for (var name in defaultValues) {

        // Name is the key object reference and should point to an

        // input element with the name attribute equal to it.

        var $this = $('input[name="'+name+'"]');

        var validate = '';

        var errortext = '';

        // Only do the apply if their are elements found.

        if ($this.length != 0) {

            // Add the custom or default value to validate against.

            // If both are available, it will check both during the

            // blur.checkRequired handler.

            if (defaultValues[name].hasOwnProperty('validate')) {

                validate = defaultValues[name].validate;

            } else {

                validate = defaultValues[name].default;

            }

            // Set the value for the error text to display, defaulting

            // to the 'default' value if the property does not exist.

            if (defaultValues[name].hasOwnProperty('errortext')) {

                errortext = defaultValues[name].errortext;

            } else {

                errortext = defaultValues[name].default;

            }

            // Add the validation event handler, if present.

            if (typeof defaultValues[name].onvalidation == 'function') {

                $this.bind('validation',defaultValues[name].onvalidation);

                // Tell the blur.checkRequired() to run the validator handler.

                $this.data('usevalidator',true);

            } else {

                $this.data('usevalidator',false);

            }

            // Set the default value to the... default value if it is present

            // and the element's value is empty. Note, this will allow you to

            // not overwrite values returned by a roundtrip to the server 

            // (in case the submit handler does not prevent the form being

            // being submitted.

            if ($this.val() == '' && defaultValues[name].default) {

                $this.val(defaultValues[name].default);

            }

            // Set custom attributes for the related values.

            $this.attr('default',defaultValues[name].default);

            $this.attr('validate',validate);

            $this.attr('errortext',errortext);

        }

    }

    $('form').submit(function(){

        // NOTE!!! I am return false to prevent the form in jsfiddle

        // from submitting the form EVER. This is just for diagnostic

        // reasons, it should not done in your production script.

        if (checkRequired()) {

            alert('Form will submit.');

        } else {

            alert('Form will NOT submit');

            return false;

        }

        // Remove this when you want to use this for real.

        return false;

    });

    // We will use a cached jQuery object.

    $default = $('input[type="text"][default],input[type="text"].required');

    // See http://api.jquery.com/bind/ for more on custom events,

    // including namespaced events like blur.checkRequired.

    $default.live('blur.checkRequired',function(){

        var $this = $(this);

        var $body = $('body');

        var notvalidated = true;

        // Having the 'required' class on the input causes it to

        // check for validation.

        if ($this.hasClass('required')) {

            // Triggers the custom validation handler.

            if ($this.data('usevalidator') === true) {

                $this.trigger('validation');

            }

            notvalidated = $this.val() == '' ||

                           $this.val() == $this.attr('default') || 

                           $this.val() == $this.attr('validate') ||

                           $this.data('notvalidated') === true;

            if (notvalidated) {

                $body.data('requiredErrors').push($this.attr('errortext'));

                $this.addClass('requiredError');

            } else {

                $this.removeClass('requiredError');

            }

        }

    });

    // Namespaced handlers prepended with a regular handler like

    // blur, focus, etc... will be fired with the regular handler.

    $default.live('focus.checkDefault', function() {

        var el = $(this);

        if (el.hasClass('default')) {

            el.removeClass('default').val('');

        }

        if (el.attr('name') === 'dob') {

            $(this).mask('99.99.9999', {placeholder:' '});

        }

    });

    $default.live('blur.checkDefault', function() {

        var el = $(this);

        var name = el.attr('name');

​

        // Really we only want to do anything if the field is *empty*

        if (el.val().match(/^[\s\.]*$/)) {

​

            // To get our default style back, we'll re-add the classname

            el.addClass('default');

​

            // Unmask the 'dob' field

            if (name == 'dob') {

                el.unmask();

            }

            // And finally repopulate the field with its default value

            el.val(el.attr('default'));

        }

    });

});

​