|
With Web 2.0 , websites are becoming more attractive as well as more interactive, so to keep up with the pace we have to make our validation process more interactive too with the help of Javascript and CSS. This code snippet demonstrates 6 different types of visual response to Javascript-based validation of a form.
Different types of validation in this example |
|
The code given below is reusable, copy it to a text file and save it on the desktop as test.html and then open it in a browser. You can also include it in your project and use specific validations by passing appropriate parameters with the function. |
Abinash JS Validation function checkblur() { if(document.getElementById('vtype').value == 'v6') validatev6(); } function setvalidationtype(id) { document.getElementById('v1').style.color='#ffffff'; document.getElementById('v2').style.color='#ffffff'; document.getElementById('v3').style.color='#ffffff'; document.getElementById('v4').style.color='#ffffff'; document.getElementById('v5').style.color='#ffffff'; document.getElementById('v6').style.color='#ffffff'; document.getElementById('infov1').style.display='none'; document.getElementById('infov2').style.display='none'; document.getElementById('infov3').style.display='none'; document.getElementById('infov4').style.display='none'; document.getElementById('infov5').style.display='none'; document.getElementById('infov6').style.display='none'; document.getElementById(id).style.color='#FF6600'; document.getElementById('info'+id).style.display='block'; document.getElementById('vtype').value=id; } function validate() { if(document.getElementById('vtype').value == 'v1') validatev1(); else if(document.getElementById('vtype').value == 'v2') validatev2(); else if(document.getElementById('vtype').value == 'v3') validatev3(); else if(document.getElementById('vtype').value == 'v4') validatev4(); else if(document.getElementById('vtype').value == 'v5') validatev5(); else if(document.getElementById('vtype').value == 'v6') validatev6(); } function validatev6() { if(document.getElementById('name').value == '') { document.getElementById('icon').src= 'http://www.titanicons.com/files/Red_8_Point_Star_Button_Icon__500px__ Copyright___2006_Titan_Icons.jpg'; document.getElementById('icon').style.width='20px' document.getElementById('icon').style.height='20px' document.getElementById('icon').style.display='block'; document.getElementById('name').focus() } else { document.getElementById('icon').src= 'http://www.britishrecycledplastic.co.uk/images/tick_icon.gif'; document.getElementById('icon').style.width='20px' document.getElementById('icon').style.height='20px' document.getElementById('icon').style.display='block'; } } function validatev5() { if(document.getElementById('name').value == '') { var alertmsg = " Please Enter Your Name
" document.getElementById('alertm').innerHTML = alertmsg; } } function validatev4() { if(document.getElementById('name').value == '') { document.getElementById('errorarea').innerHTML='Please enter Name!!'; window.setTimeout("shaddedeffect(96)",566); document.getElementById('name').focus() } else { document.getElementById('errorarea').innerHTML=''; } } function validatev3() { if(document.getElementById('name').value == '') { document.getElementById('name').style.color='red'; document.getElementById('name').value = 'Please Enter Name !!'; window.setTimeout("removemessage('name','20')",600); } else { document.getElementById('name').style.color='#999999'; } } function validatev1() { if(document.getElementById('name').value == '') { document.getElementById('namelb').className='lab1'; document.getElementById('name').focus() } else { document.getElementById('namelb').className='lab'; } } function validatev2() { if(document.getElementById('name').value == '') { document.getElementById('name').style.border='1px solid red'; document.getElementById('name').focus() } else { document.getElementById('name').style.border='1px solid #CFCFCF'; } } function removemessage(fieldname,length) { length = parseInt(length)-1; if(length != 0) { document.getElementById('name').value= document.getElementById('name').value.substring(0,length); window.setTimeout("removemessage('"+fieldname+"','"+length+"')",50); } else { document.getElementById('name').style.color='#999999'; document.getElementById('name').value=''; document.getElementById('name').focus() } } function shaddedeffect(counter) { counter = parseInt(counter)-1; if(counter > 13) { document.getElementById('errorarea').style.opacity = "0."+counter; document.getElementById('errorarea').filter = 'alpha(opacity=' + counter + ')'; window.setTimeout("shaddedeffect('"+counter+"')",36); } else { document.getElementById('errorarea').innerHTML = ''; } } .lab { color:#0099FF; } .lab1 { color:#FF0000; } .mytextbox { border:1px solid #CFCFCF; color:#999999;width:300px; }
| Vtype1 | Vtype2 | Vtype3 | Vtype4 | Vtype5 | Vtype6 |
| This change the label’s color to red if the validation fails. |
| Name | : | ||