API tools faq
paste
Advertisement
pgeeweb

23.11.2016 - register form validation

pgeeweb
Nov 23rd, 2016
163
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.13 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Register form</title>
  5.  
  6.         <link href="https://fonts.googleapis.com/css?family=Open+Sans&amp;subset=cyrillic,cyrillic-ext" rel="stylesheet">
  7.  
  8.         <style type="text/css">
  9.             body {
  10.                 font-family: 'Open Sans', sans-serif;
  11.             }
  12.             .form-group {
  13.                 margin-bottom: 10px;
  14.             }
  15.             label {
  16.                 display: inline-block;
  17.                 width: 30%;
  18.             }
  19.  
  20.             input[type="text"], input[type="email"], input[type="password"] {
  21.                 width: 60%;
  22.                 border: 1px solid #000000;
  23.                 padding: 3px 5px;
  24.                 background: #f2fcff;
  25.                 box-shadow: 1px 1px 2px grey;
  26.             }
  27.  
  28.             input[type="submit"] {
  29.                 width: 150px;
  30.                 background: #009dbc;
  31.                 border: 0;
  32.                 height: 30px;
  33.                 color: #fff;
  34.                 font-weight: bold;
  35.             }
  36.  
  37.             .hidden {
  38.                 display: none;
  39.             }
  40.  
  41.             .red {
  42.                 color: red;
  43.             }
  44.  
  45.             .green {
  46.                 color: green;
  47.             }
  48.         </style>
  49.         <script
  50.               src="https://code.jquery.com/jquery-2.2.4.min.js"
  51.               integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  52.               crossorigin="anonymous"></script>
  53.         <script type="text/javascript">
  54.             jQuery(document).ready(function() {
  55.                 jQuery("#username").change(function() {
  56.                     var username = jQuery("#username").val();
  57.                     if(username.length<3 || username.length>30) {
  58.                         jQuery("#username").css("borderColor", "red");
  59.                         if(jQuery("#username-error").is(":visible")==false) {
  60.                             jQuery("#username-error").toggle();
  61.  
  62.                         }
  63.  
  64.                         if(jQuery("#username-ok").is(":visible")) {
  65.                             jQuery("#username-ok").toggle();
  66.                    
  67.                         }
  68.                     } else {
  69.                         jQuery("#username").css("borderColor", "green");
  70.                         if(jQuery("#username-error").is(":visible")) {
  71.                             jQuery("#username-error").toggle();
  72.  
  73.                         }
  74.  
  75.                         if(jQuery("#username-ok").is(":visible")==false) {
  76.                             jQuery("#username-ok").toggle();
  77.                    
  78.                         }
  79.  
  80.                     }
  81.                 });
  82.  
  83.                 jQuery("#register-form").submit(function(event) {
  84.                     event.preventDefault();
  85.                     var password = $("#password").val();
  86.                     var confirm_password = $("#confirm_password").val();
  87.                     if(password==confirm_password) {
  88.                         alert("gg wp");
  89.                     } else {
  90.                         alert("The passwords do not match!");
  91.                     }
  92.                 });
  93.             });
  94.         </script>
  95.     </head>
  96.     <body>
  97.         <form method="post" id="register-form">
  98.             <div class="form-group">
  99.                 <label>Username</label>
  100.                 <input id="username" type="text" name="username">
  101.                 <p id="username-error" class="hidden red">ERROR: The username should be between 3 and 30 symbols.</p>
  102.                 <p id="username-ok" class="hidden green">OK</p>
  103.             </div>
  104.             <div class="form-group">
  105.                 <label>Email</label>
  106.                 <input id="email" type="email" name="email">
  107.             </div>
  108.             <div class="form-group">
  109.                 <label>Name</label>
  110.                 <input id="name" type="text" name="name">
  111.             </div>
  112.             <div class="form-group">
  113.                 <label>Password</label>
  114.                 <input id="password" type="password" name="password">
  115.             </div>
  116.             <div class="form-group">
  117.                 <label>Confirm Password</label>
  118.                 <input id="confirm_password" type="password" name="confirm_password">
  119.             </div>
  120.             <div class="form-group">
  121.                 <input type="submit" name="send" value="zdr server">
  122.             </div>
  123.         </form>
  124.     </body>
  125. </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!