API tools faq
paste
Advertisement
lalatino

simple form validation

lalatino
Jul 4th, 2012
336
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.75 KB | None | 0 0
raw download clone embed print report
  1.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.     <html>
  3.     <head>
  4.     <title>Library</title>
  5.     <style type="text/css">
  6.             table {
  7.                     border:1px solid #aaa;
  8.                     margin: 0.5em 0;
  9.             }
  10.     </style>
  11.     <script type='text/javascript'>
  12.     <!--
  13.      
  14.     function NewBooks(divName) {
  15.            
  16.             // public properties
  17.             this.books = document.getElementById(divName);
  18.            
  19.             // private properties
  20.             var counter = 0;
  21.             var limit = 8;
  22.             var bname1 = new Array();
  23.             var abname1 = new Array();
  24.             var cost1 = new Array();
  25.             var num1 = new Array();
  26.             var str;
  27.             var self = this;
  28.            
  29.             // private method
  30.             var addNewBook = function() {
  31.                     //alert(this + self + 'counter +1 is '+counter);
  32.                     self.books.childNodes[0].nodeValue = ' BOOKS   '+counter+'/'+limit+'   ';
  33.                     var newdiv = document.createElement('div');
  34.                     str =  '<table id="book'+counter+'">';
  35.                     str += '<tr> <td style="text-align:right"> Name of book ' +counter + ' : </td><td> <input type="text" name="bname[]" value="" /> <span id="bname[]'+counter+'err" value=""></span> </td> </tr>';
  36.                     str += '<tr> <td style="text-align:right"> Name of Authour '+counter+' : </td><td> <input type="text" name="aname[]" value="" /> <span id="aname[]'+counter+'err" value=""></span> </td> </tr>';
  37.                     str += '<tr> <td style="text-align:right"> Publisher '+counter+' : </td><td> <input tyme="text" name="pub[]" value="" /> <span id="pub[]'+counter+'err" value=""></span> </td> </tr>';
  38.                     str += '<tr> <td style="text-align:right"> ISDN Number ' + counter + ' : </td><td> <input type="text" name="isdn[]" value="" />  <span id="isdn[]'+counter+'err" value=""></span> </td> </tr>';
  39.                     str += '<tr> <td style="text-align:right"> Edition ' + counter + ' : </td><td> <input type="text" name="edi[]" value="" />  <span id="edi[]'+counter+'err" value=""></span> </td> </tr>';
  40.                     str += '<tr> <td style="text-align:right"> Price '+ counter +' : </td><td> <input type="text" name="cost[]" value="" />  <span id="cost[]'+counter+'err" value=""></span> </td> </tr>';
  41.                     str += '<tr> <td style="text-align:right"> Number of copies '+ counter + ' : </td><td> <input type="text" name ="num[]" value="" /> <span id="num[]'+counter+'err" value=""></span> </td> </tr>';
  42.                     str += '</table>';
  43.                     newdiv.innerHTML = str;
  44.                     self.books.appendChild(newdiv);
  45.             };
  46.            
  47.             // public method
  48.             this.addInput = function() {
  49.                     if (counter == limit)
  50.                     {
  51.                             alert('You have reached the limit of adding ' + counter + ' inputs');
  52.                     }
  53.                     else
  54.                     {
  55.                             counter++;
  56.                             addNewBook();
  57.                             //alert('counter +1 is '+counter);
  58.                     };
  59.             }
  60.            
  61.             // public method
  62.             this.validateInputs = function() {
  63.                     //alert(this + self);
  64.                    
  65.                     var t = document.getElementsByTagName('table'); // table collection
  66.                     if (!t.length) {
  67.                             return false;
  68.                     }
  69.                     var name;
  70.                     var total_errors = 0;
  71.                     for (var i=0; i<t.length; i++) {
  72.                             if (t[i].getAttribute('id').indexOf("book") == 0) { // if identifier is book1, book2, ... (just for security)
  73.                                     var f = t[i].getElementsByTagName('input'); // all input fields of i-th book
  74.                                     for (var j=0; j<f.length; j++) {
  75.                                             //alert('validating book #'+i+' , input field #'+j);
  76.                                             if (validate_field(f[j],i+1)==false) {
  77.                                                     total_errors += 1;
  78.                                             }
  79.                                     }
  80.                             }
  81.                     }
  82.                     if (total_errors==0) {
  83.                             return true;
  84.                     } else {
  85.                             alert(total_errors + ' errors found.');
  86.                             return false;
  87.                     }
  88.             }
  89.            
  90.             function validate_field(f,errid) { // f is input element
  91.                     var name = f.name;
  92.                     var value = f.value;
  93.                     var error_div = document.getElementById(name+errid+'err');
  94.                     //alert('name '+name+' value '+value);
  95.                     if (name.indexOf('bname') == 0) { // if validate book name
  96.                             if (value == '') { // e.g. book name should not be empty string?
  97.                                     error_div.innerHTML = 'book name cannot be empty!';
  98.                                     return false;  // field is wrong
  99.                             }
  100.                     }
  101.                     else if (name.indexOf('aname') == 0) { // if validate author name
  102.                             if (value.length<2) {
  103.                                     error_div.innerHTML = 'author\'s name is too short!';
  104.                                     return false; // at least two characters long name? :)
  105.                             }
  106.                     }
  107.                     else if (name.indexOf('pub') == 0) { // if validate publisher
  108.                             if (value.length<2) {
  109.                                     error_div.innerHTML = 'publisher\'s name is too short!';
  110.                                     return false;
  111.                             }
  112.                     }
  113.                     else if (name.indexOf('isdn') == 0) { // if validate ISDN Number
  114.                             if (value == '') {
  115.                                     error_div.innerHTML = 'ISDN cannot be empty!';
  116.                                     return false;
  117.                             }
  118.                     }
  119.                     else if (name.indexOf('edi') == 0) { // if validate Edition
  120.                             if (value == '') {
  121.                                     error_div.innerHTML = 'edition cannot be empty!';
  122.                                     return false;
  123.                             }
  124.                     }
  125.                     else if (name.indexOf('cost') == 0) { // if validate Price
  126.                             if (value=='') {
  127.                                     error_div.innerHTML = 'Cannot be empty!';
  128.                                     return false;
  129.                             }
  130.                             if (isNaN(value)) {
  131.                                     error_div.innerHTML = 'Please write a price using digits!';
  132.                                     return false;
  133.                             }
  134.                     }
  135.                     else if (name.indexOf('num') == 0) { // if validate Number of copies
  136.                             if (value=='') {
  137.                                     error_div.innerHTML = 'Cannot be empty!';
  138.                                     return false;
  139.                             }
  140.                             if (isNaN(value)) {
  141.                                     error_div.innerHTML = 'Please number of copies via digits!';
  142.                                     return false;
  143.                             }
  144.                     }
  145.                     error_div.innerHTML = 'ok';
  146.                     return true; // field is ok
  147.                     // you can see also http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
  148.             }
  149.     }
  150.      
  151.      
  152.     var obj; // this will be object
  153.     window.onload = function(){
  154.             obj = new NewBooks('books'); // can create object, because now the #books div is already created (exists) in browser's DOM (document object model)
  155.     }
  156.     // $(document).ready(function(){ obj = new NewBooks('books'); }); // safe onload with jQuery
  157.     // see also http://www.webreference.com/programming/javascript/onloads/
  158.    
  159.     //-->
  160.     </script>
  161.     </head>
  162.    
  163.     <body>
  164.     <form action="http://localhost/test.php" method="post" onsubmit="return obj.validateInputs()">
  165.     <div id="books"> BOOKS - <input type="button" value="add" onclick="obj.addInput()" /> <hr/> </div>
  166.     <input type="submit" name="send_books" value="Send" />
  167.     </form>
  168.     </body>
  169.     </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!