Registration form validation

Question

I want to validate this form ignoring default values of input fields. I tried all possible ways with jQuery validate plugin. It\'s hard to understand how to use it, since I\'m a

Answer 1

This might be overkill in a way, but I wanted to demonstrate a few different things here. Primarily:

• Namespacing event handlers
• Custom event handling
• Triggering event handlers
• Error detection and handling with an array of errors
• Using attributes and $.data() to store your element-related data
• Using a structured object to configure your form

Read through the comments and let me know if you have any questions.

Mock HTML

 
Əsas məlumatlar


 

 

 



 

     Password: 
 


 

     DOB: 
 


 

     Phone: 
 

Javascript

// An object containing different fields by name and
// 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.
"+
            "These errors must be fixed before submitting the form."+
            "
";
        for (var i = 0; i < errors.length; i++) {
            errortext += "
"+errors[i]+"
";
        }
        errortext += '
';
        errortext = '
'+errortext+'
';
        // 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'));
        }
    });
});

http://jsfiddle.net/userdude/CMmDF/