API tools faq
paste
Advertisement
framp

Auto-validating Form

framp
May 16th, 2012
64
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.54 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2. if (!empty($_POST)){
  3.     header('Cache-Control: no-cache, must-revalidate');
  4.     header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
  5.     header('Content-type: application/json');
  6.     die(json_encode($_POST));
  7. }
  8. ?><html>
  9. <head>
  10. <title>Auto-validating Form</title>
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" ></script>
  13.  
  14. <style>
  15.     #registration {
  16.         margin-top:10px;
  17.     }
  18.     #registration label{
  19.         position:absolute;
  20.     }
  21.     #registration>div{
  22.         height:60px;
  23.     }
  24.     #registration>div>input, #registration>div>textarea{
  25.         position:absolute;
  26.         margin-left: 120px;
  27.         width:200px;
  28.     }
  29.     #registration .submit{
  30.         display:block;
  31.         margin-left:100px;
  32.         width:100px;
  33.     }
  34.     #registration .messages{
  35.         position:absolute;
  36.         display:block;
  37.         margin-left: 330px;
  38.     }
  39.     #registration .messages>.error{
  40.         background: #FEF1EC;
  41.         color: #CD0A0A;
  42.     }
  43.     #registration .messages>.notice{
  44.         background: #FBF9EE;
  45.         color: #363636;
  46.     }
  47.     #registration .messages>div{
  48.         display:none;
  49.         padding:5px;
  50.         width:500px;
  51.         height:40px;
  52.     }
  53.    
  54.     #mightyResponse{
  55.         display:none;
  56.     }
  57. </style>
  58.  
  59. </head>
  60. <body>
  61. <form id="registration" method="post" action="">
  62.     <div>
  63.         <label for="name">Name</label>
  64.         <input type="text" name="name" />
  65.         <div class="messages">
  66.             <div class="error not" title="/^[a-zàèòùì \.\-]{3,}$/i">I bet your name is longer than 3 characters and contains only letters, dots(.) and dashes(-)</div>
  67.             <div class="notice" title="/^[a-zàèòùì \.\-]{3,5}$/i">Aye there, shorty name</div>
  68.         </div>
  69.     </div>
  70.     <div>
  71.         <label for="surname">Surname</label>
  72.         <input type="text" name="surname" />
  73.         <div class="messages">
  74.             <div class="error not" title="/^[a-zàèòùì \.\-]{3,}$/i">I bet your surname is longer than 3 characters and contains only letters, dots(.) and dashes(-)</div>
  75.             <div class="notice" title="/^[a-zàèòùì \.\-]{8,}$/i">Hope your surname doesn't have to COMPENSATE anything</div>
  76.         </div>
  77.     </div>
  78.     <div>
  79.         <label for="email">Email</label>
  80.         <input type="text" name="email" />
  81.         <div class="messages">
  82.             <div class="error not" title="/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i">
  83.             Your email is not valid (or my regex doesn't match it:
  84.             I'm too <a href="http://www.mailinator.com">lazy</a> to copy that loooong RFC 2822 implementation just to support you boring 1%) </div>
  85.         </div>
  86.     </div>
  87.     <div>
  88.         <label for="description">Description</label>
  89.         <textarea name="description"></textarea>
  90.         <div class="messages">
  91.             <div class="error" title="/^$/i">Please, just spare one letter for the poors!</div>
  92.         </div>
  93.     </div>
  94.     <div>
  95.         <label for="spam">Interested in my <br />crappy mailing list?</label>
  96.         <input type="checkbox" name="spam" />
  97.         <div class="messages">
  98.             <div class="notice" title="/^false$/i">Too bad! You should!!!</div>
  99.         </div>
  100.     </div>
  101.     <br />
  102.     <input type="submit" value="Register" class="submit" />
  103. </form>
  104. <div id="mightyResponse">
  105. <h2>Your mighty server replied back:</h2>
  106. <pre></pre>
  107. </div>
  108. <script>
  109.     (function ($){
  110.     $.fn.anotherLameFormPlugin = function (o){
  111.         var _this = this,jQuery
  112.             validate = function(){
  113.                 var status = true;
  114.                 _this.find('input, textarea').each(function(){
  115.                     var element = $(this),
  116.                         messages = element.next('.messages').children('div');
  117.                     if (messages.length){
  118.                         var text, results = [];
  119.                         if (element.is(':checkbox'))
  120.                             text = element.is(':checked').toString();
  121.                         else
  122.                             text = element.val();
  123.                         messages.each(function(){
  124.                             var message = $(this),
  125.                                 regex = message.attr('title'),
  126.                                 eor = regex.lastIndexOf('/'),
  127.                                 modifier = regex.substr(eor+1);
  128.                             regex = regex.substr(1, eor-1);
  129.                             regex = new RegExp(regex, modifier);
  130.                            
  131.                             message.hide();
  132.                             if (regex.test(text) === !message.hasClass('not')){
  133.                                 if (message.hasClass('error')){
  134.                                     status = false;
  135.                                 }
  136.                                 message.fadeIn();
  137.                             }
  138.                         });
  139.                     }
  140.                    
  141.                 });
  142.                 return status;
  143.             }
  144.            
  145.         this.submit(function(){
  146.             if (!validate())
  147.                 return false;
  148.             var method = $.get;
  149.             if (_this.attr('method').toLowerCase()=='post')
  150.                 method = $.post;
  151.             method(_this.action, _this.serialize(), o.callback);
  152.             return false;
  153.         });
  154.        
  155.         return this;
  156.     };
  157. }(jQuery));
  158.    
  159.     $('#registration').anotherLameFormPlugin({
  160.         callback: function(data){
  161.             $("#mightyResponse")
  162.                 .fadeIn()
  163.                 .children('pre').html(JSON.stringify(data, null, '\t'));
  164.         }
  165.     })
  166. </script>
  167. </body>
  168. </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!