Home arrow PHP arrow Page 4 - Completing a Blogger with PHP

Implementing client-side data validation on input forms - PHP

If you’re looking for a comprehensive series on how to create an expansible blog application with PHP 5, then this group of tutorials might be what you’ve been expecting to find. Welcome to the concluding installment of the series "Building a blogger with PHP." Made up of three friendly articles, this series provides you with all the information you need to start building a blog system with PHP in a few easy steps.

TABLE OF CONTENTS:
  1. Completing a Blogger with PHP
  2. A quick look at the BlogProcessor class
  3. Providing the blog processor with database connectivity
  4. Implementing client-side data validation on input forms
  5. Improving the blogger’s visual appearance
By: Alejandro Gervasio
Rating: starstarstarstarstar / 8
December 05, 2006

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



 
 
>>> More PHP Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

PHP ARTICLES

- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: