Introduction
When we are worked with the input Form than it is more important for validation of all of the data. There are two type of validation are exists is that Server Side Validation and Client Side Validation. Client-side validation is often much faster and provides the user with a very good experience. Validating form data from the client side is easy to do and can save a lot of unnecessary calls to the server as all processing is handled by the web browser. JavaScript provides a way to validate form’s data on the client’s computer before sending it to the web server.
Recently I have done an interactive client side form validation using JavaScript that’s I want to share with this Codeproject community. So let’s get started,
HTML Input Form
Here I have present an Form that contains Name, Address, Email, Password, Web URL, Comment box and answer an addition box. The code segment for the HTML input Form is as following,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!--======================= Author name Field ===========================--> <div class="comment-author"> <label for="author">Name <span class="required">*</span></label> <span class="arrow-box" id="author-arrow-box"></span> <input id="author" name="author" type="text" value="" size="30" aria-required="true"> <span id="author-footer-ex">Name has only numbers and alphabets. Example: Adam99</span> </div> <!--========================== Address field =============================--> <div class="comment-address"> <label for="address">Address</label> <span class="arrow-box" id="address-arrow-box"></span> <input id="address" name="address" type="text" value="" size="30"> <span id="address-footer-ex">Type your Address: i.e, Arlington, Texas, USA</span> </div> <!--========================= Email field ==========================--> <div class="comment-email"> <label for="email">Email <span class="required">*</span></label> <span class="arrow-box" id="email-arrow-box"></span> <input id="email" name="email" type="text" value="" size="30" aria-required="true"> <span id="email-footer-ex">Example: emailAddress@site.com</span> </div> <!--========================= Password field ==========================--> <div class="comment-password"> <label for="password">Password <span class="required">*</span></label> <span class="arrow-box" id="password-arrow-box"></span> <input id="password" name="password" type="password" value="" size="30" aria-required="true"> <span id="password-footer-ex">Keep Securate your account</span> </div> <!--========================== Web URL Field ==========================--> <div class="comment-url"> <label for="url">Website</label> <span class="arrow-box" id="url-arrow-box"></span> <input id="url" name="url" type="text" value="" size="30"> <span id="url-footer-ex">Example: http://www.WebAddress.com</span> </div> <!--====================== Comment Area field ==========================--> <div class="comment-area"> <label for="comment">Comment</label> <span class="arrow-box" id="comment-arrow-box"></span> <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> <span id="comment-footer-ex">You can use html tag to write the comment</span> </div> <!--========================= Answer the Addition =============================--> <div class="addition-area"> <label for="add_ans" id="add_label"> <script language="javascript"> var value1=Math.floor(Math.random()*10); var value2=Math.floor(Math.random()*10); document.write(value1+" + "+value2+" = ?"); </script> <span class="required">*</span> </label> <span class="arrow-box" id="add-arrow-box"></span> <input id="add" name="add" type="text" size="5"> <span id="add-footer-ex">Answer the Question?</span> </div> |
Adding Style
Here I have used the following style sheet for the above HTML input Form,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 |
:focus { outline: 0; } body { padding: 0 2em; background:url(../image/bg.jpg) center fixed; } /*------------- Comment Form ---------------*/ #contact { background: #ddd; border: 1px solid #d3d3d3; -moz-border-radius: 3px; border-radius: 3px; margin: 0 auto 2.625em; padding: 1.625em; position: relative; width: 58%; overflow:hidden; } #contact h3 { color: green; font-size: 24px; font-weight: bold; line-height: 30px; margin: 0; } #contact p { font-size: 12px; } #contact label { line-height: 2.2em; } #contact input[type=text], #contact input[type=password] { display: block; height: 24px; width: 75%; } #contact input[type="text"], #contact input[type="password"], #contact textarea { background: #fff; border: 4px solid #eee; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95); -moz-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95); box-shadow: inset 0 1px 3px rgba(204,204,204,0.95); position: relative; padding: 10px; text-indent: 80px; } #contact .comment-author, #contact .comment-address, #contact .comment-email, #contact .comment-password, #contact .comment-url, #contact .comment-area, #contact .addition-area{ position: relative; width:80%; } #contact .addition-area{ width:40%; } #contact .comment-author label, #contact .comment-address label, #contact .comment-email label, #contact .comment-password label, #contact .comment-url label, #contact .comment-area label, #contact .addition-area label{ background: #eee; -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); box-shadow: 1px 2px 2px rgba(204,204,204,0.8); color: #555; display: inline-block; font-size: 13px; left: 4px; min-width: 60px; padding: 4px 10px; position: relative; top: 40px; z-index: 1; } #contact input[type="text"]:focus, #contact input[type="password"]:focus, #contact textarea:focus { text-indent: 0; z-index: 1; } #contact textarea { resize: vertical; width: 95%; } .required { color: #bd3500; font-size: 22px; font-weight: bold; left: 75%; position: absolute; z-index: 1; } #contact form-text { font-size: 13px; margin: 10px 0; } /* ----Comment submit area ------*/ #contact .comment-submit { float: right; } #contact input#submit { background: #222; border: 1px solid green; border-radius: 5px; -moz-border-radius: 5px; color: #eee; cursor: pointer; font-size: 15px; padding: 5px 42px 5px 22px; position: relative; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); height:40px; box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); transition:all 0.3s ease-in-out; } #contact input#submit:hover{ background:#600; color:#0F0; } #contact input#submit:active { background: #1982d1; color: #bfddf3; } /* ----End of :Comment submit area ------*/ /*----link<a> -----*/ #contact a{ color: #1982d1; text-decoration: none; } #contact a:hover { text-decoration: underline; } /*----End of link<a> -----*/ #author-footer-ex, #address-footer-ex, #email-footer-ex, #password-footer-ex, #url-footer-ex, #comment-footer-ex, #add-footer-ex{ opacity:0; top:10px; left:10px; position:relative; color: #600; } /*------------------------------*/ .arrow-box{ position: relative; background: #88b7d5; border: 2px solid #c2e1f5; width:200px; border-radius:3px; margin-left:5px; color:#003 !important; left:250px; top:25px; opacity:0; padding: 3px; } .arrow-box:after{ right: 100%; border:1px solid transparent; content: ""; height: 0px; width: 0px; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-right-color: #88b7d5; border-width: 7px; top: 50%; margin-top: -10px; } |
JavaScript Live Validation
Here I have used two types of events to live validation of this form using the JavaScritpt. First event is triggered when you click on the input form field and another event will be trigger when you click on the submit button. So I want to discuss about the two types of event one by one.
Field Click Event:
When you click on an input form field than function FieldFocus() will be called and the function definition is as following,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function FieldFocus(name,area,foot_area,right_area,right_pos,right_txt,right_txt_blank,right_txt_er,field_format){ $(area).focus(function(){ $(this).css("background-color","#FFE"); $(foot_area).animate({ opacity:'1'}); $(right_area).css("color","#FFC"); $(right_area).animate({ opacity:'0',left:'250px',top:'25px'}); $(right_area).text(right_txt); $(right_area).animate({ opacity:'1',left:right_pos,top:'25px'}); }); $(area).blur(function(){ $(this).css("background-color","#fff"); $(foot_area).animate({ opacity:'0'}); $(right_area).animate({ opacity:'0',left:'250px',top:'25px'}); // Live Check the field that is focus-out(blur) live_check(name,area,right_area,right_pos,right_txt_blank,right_txt_er,field_format); }); }//End of function FieldFocus |
The above function is only responsible for the change the field background color, display the field hints text below the input field, display the animated text right side of the field and after that it will be send the argument in the live_check() function for the further processing.
The function definition of the live_check() function is as following,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function live_check(name,area,right_area,right_pos,right_txt_blank,right_txt_er,field_format){ var field_value=document.forms["ContactUs"][name].value; // If field is blank if (field_value==null || field_value=="") { // required field check if(name=="author"||name=="email"||name=="add"||name=="password") { field_output(area,right_area,right_txt_blank,right_pos,"#FDD","#F00"); } else{ field_output(area,right_area,right_txt_blank,right_pos,"#FFF","#FFC"); } } //If, Field is not blank else { if(field_value.match(field_format)){ return true; } else{ field_output(area,right_area,right_txt_er,right_pos,"#FDD","#F00"); } }// End of else [i.e, field is not blank] } // End of function Check |
In this function take the input as field value and check it is null or not. If the field value is null then call the field_output() function and change the background color of the field and display the wrong text right side of the input field. And for the another case if the field value is matched with the correct format than it will be return true or else send the argument in the field_output() function to display the error text.
The function field_output() code segment is as following,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function field_output(field,box,txt,pos,bgcolor,color){ var div=$(field); div.css("background-color",bgcolor); div.animate({opacity:'0.4'},"slow"); div.animate({opacity:'0.8'},"slow"); div.animate({opacity:'0.4'},"slow"); div.animate({opacity:'0.8'},"slow"); div.animate({opacity:'0.4'},"slow"); div.animate({opacity:'0.8'},"slow"); $(box).css("color",color); $(box).text(txt); $(box).animate({ opacity:'1',left:pos,top:'25px'}); } |
Depend on the set of arguments of the field_output() function the background color of the input field will be animated and the required text message will be shown right side of the input field.
Submit Button Click Event:
When user click on the submit button then sequentially for the one by one field arguments is pass through Submit_Check() function. The Submit_Check() function definition is as following,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function Submit_Check(field_name,field_id,box,box_msg,box_pos,field_bgcolor,box_color,field_pattern) { var field_value=document.forms["ContactUs"][field_name].value; if (field_value==null || field_value=="") // If field is blank { field_output(field_id,box,box_msg,box_pos,field_bgcolor,box_color); return false; } else //If, Field is not blank { if(field_value.match(field_pattern)) { //alert('Field in not Blank - Matched'); return true; } else { //alert('Field in not Blank - Not Matched'); field_output(field_id,box,box_msg,box_pos,field_bgcolor,box_color); return false; } }// End of else [i.e, field is not blank] } |
In this function take the input as field value and check it is null or not. If the field value is null then call the field_output() function and change the background color of the field and display the wrong text right side of the input field. And for the another case if the field value is matched with the correct format than it will be return true or else send the argument in the field_output() function to display the error text.
Conclusion
Actually it is most important for any input form to validation the data that user are input. Client-side form validations help in giving immediate feedback to the user but it is also required to add server side form validation form to processing script. The user can disable JavaScript on their server or even auto-bots might try to submit your form as well. But as the client side validation can be give the immediate feedback to the user so that it should be used for the form processing. I hope you will enjoy this above project to validate the data for the client side form validation. Happy Coding to you…..:)
