Implementing client-side data validation on input forms - PHP

As I mentioned in the section that you just read, one of the last improvements that I plan to introduce to expand the existing functionality of the blogger consists essentially of implementing a basic (but effective) validation mechanism on each of the input forms included with the application.

As you probably already noticed from the beginning, the blogger program originally included a JavaScript file called “valfunctions.js.” Not surprisingly, this file is the container for all the JavaScript functions that will perform a basic validation on each value entered in the two input forms integrated with the application. These input forms were covered in detail in the previous article.

Regarding the JavaScript-based validation functions contained in the “valfunctions.js” file, they look like this:

// validate form

function validateForm(formObj){

            valid=true;

            var title=formObj.elements[0];

            if(!title){return};

            if(!title.value){showError(title,'*Enter a title for
your blog')};

            var author=formObj.elements[1];

            if(!author){return};

            if(!author.value){showError(author,'*Enter your full
name')};

            var content=formObj.elements[2];

            if(!content){return};

            if(!content.value){showError(content,'*Enter some
text for your blog')};

            return valid;

}

// show error messages

function showError(obj,message){

            if(!obj.errorNode){

            obj.onchange=hideError;

            var span=document.createElement('span');

                        span.className='error';

            span.appendChild(document.createTextNode(message));

            obj.parentNode.appendChild(span);

                        obj.errorNode=span;

            }

            valid=false;

            return

}

// hide error messages

function hideError(){

            this.parentNode.removeChild(this.errorNode);

            this.errorNode=null;

            this.onchange=null;

}

// execute 'ValidateForm()' function when page is loaded

window.onload=function(){

            // check if browser is W3CDOM compatible

            if(document.getElementById&&document.
getElementsByTagName&&document.createElement){

                        var insform=document.getElementById
('insertform');

                        if(insform){insform.onsubmit=function()
{return validateForm(this)}};

                        var updform=document.getElementById
('updateform');

                        if(updform){updform.onsubmit=function()
{return validateForm(this)}};

    }

}

As you’ll realize, the group of validation functions listed above performs a basic verification on the data entered in the corresponding blog insertion form of the application, as well on the one used for updating existing entries. It’s not my intention to develop a full-featured validation system here, since that will be certainly out of the scope of this series. However, the JavaScript data checking system that I coded previously really works decently when it comes to verifying whether or not a particular input box has been filled.

Okay, at this stage, the blogger is now capable of validating, at least basically, any data entered into the corresponding input forms. The last step required for completing the application rests simply on adding some CSS styles to the (X)HTML markup that structures the program, improving its look and feel.

As you might have guessed, all these useful tasks will be performed in the next few lines, thus jump forward into next section. I’ll be there, waiting for you.