HTML Form code Auto Generation with Javascript Validation

There are tons of websites that generate HTML form code but probably only a few that do it with client-side Javascript validation code that is executed before the form is submitted.

FormGenics.com 's HTML Form generator not only creates professional looking forms for free, but does so with Javascript validations such as:

• Required Field Validation
• Email Address Format Validation

By default, the validation code generates a pop-up alert but this can be easily modified to display error messages by manipulating the Document Object Model (DOM).

 

Modifying the generated Formgenics form in order to display error message on the webpage, rather than as a pop-up alert

Example of Auto-generated code for an Email textbox

<script language='javascript'> function verifyMe(){ var msg=''; var email=document.getElementById('Email').value; if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))){ msg+='- Invalid Email Address: '+email+'\n\n';} //Modify the above line  --  (2) if(document.getElementById('Email').value==''){     msg+='- \n\n';} if(msg!=''){     alert('The following fields are empty or invalid:\n\n'+msg);     //Modify the above line  --  (3)     return false }else{     return true } } </script> //Insert the <div> element here  --  (1) <form name='Enquiry Form' action='test.php' method='POST' enctype='application/x-www-form-urlencoded' onsubmit='return verifyMe();'> <table id='table_form_1' cellspacing='0'>     <tr>         <td ><LABEL for='Email' ACCESSKEY='0' ><b style='color:red'>*</b>         </td>         <td ><input type='text' name='Email' id='Email' size='45' maxlength='100'  value=''>         </td>     </tr>     <tr>         <td colspan='2' align='right'><input type='submit' name='submit' value='Submit'>&nbsp;<input type='reset' name='reset' value='Reset'><br />         </td>     </tr> </table> </form>

 

There are 3 changes that will have to done:

1) Insert a <div> element at the location marked (1) in the generated code above. This is what the element will look like,

<div id='ErrorMessages'> </div>

2) Replace all the '\n' s in the Javascript code with <br/> 's . For example, in the line marked by (2), the code will be replaced as follows:

msg+='- Invalid Email Address: '+email+'<br/><br/>';

3) Modify the line marked by (3), by replacing the alert() function call with the DOM manipulation code that changes the contents of the <div> element we added in step 1. For example, the code in this example will be modified as:

document.getElementById('ErrorMessages').innerHTML = 'The following fields are empty or invalid:<br/><br/>'+msg;

Make sure both the opening round bracket '(' in the beginning and the closing round bracket ')' near the end are removed.

 

Now the error message instead of popping up will be printed in the page itself at the spot where the <div> element was added. You can add CSS styles to the div element to increase/decrease the font-size of the error message, change the font-color to red, etc.