From aryx, 2 Years ago, written in HTML5.
Embed
  1. <!DOCTYPE html>
  2. <!--
  3. aryx, 2018 | GAMF
  4. [email protected] | IRC: potvizs.ga/6667 #potvizsga
  5. -->
  6.     <head>
  7.         <meta charset="UTF-8">
  8.         <title>form validation</title>
  9.        
  10.         <style>
  11.             #form-field {
  12.                 margin:10px;
  13.             }
  14.            
  15.             #form-field label {
  16.                 width:150px;
  17.                 display:inline-block;
  18.             }
  19.            
  20.             input[type=text], input[type=email], textarea {
  21.                 border:1px solid red;
  22.             }
  23.         </style>
  24.        
  25.     </head>
  26.     <body onload="document.getElementById('submit').disabled = 1;">
  27.        
  28.         <form onsubmit="return ellenoriz()">
  29.             <div id="form-field">
  30.                 <label>Név (5 char+)</label>
  31.                 <input type="text" name="name" id="name">
  32.             </div>
  33.  
  34.             <div id="form-field">
  35.                 <label>E-mail (required)</label>
  36.                 <input type="email" name="email" id="email">
  37.             </div>
  38.  
  39.             <div id="form-field">
  40.                 <label>Üzenet (required)</label>
  41.                 <textarea id="message" name="message"></textarea>
  42.             </div>
  43.  
  44.             <div id="form-field">
  45.                 <input type="button" value="ellenoriz()" onClick="ellenoriz();">
  46.                 <input type="submit" value="Küldés" id="submit">
  47.             </div>
  48.         </form>
  49.        
  50.         <script>
  51.            
  52.            function ellenoriz() {
  53.                var in_name = document.getElementById('name');
  54.                var in_mail = document.getElementById('email');
  55.                var in_msg  = document.getElementById('message');
  56.                var checkPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  57.                
  58.                var name_jo = false;
  59.                var mail_jo = false;
  60.                var msg_jo = false;
  61.                
  62.                if (in_name.value.length >= 5) {
  63.                    in_name.style="background-color:#96ff9f;";
  64.                    console.log("jó a név");
  65.                    name_jo = true;
  66.                } else {
  67.                    in_name.style="background-color:#ff8e8e;";
  68.                    console.log("nem jó a név");
  69.                }
  70.                
  71.                if (checkPattern.test(in_mail.value) === true) {
  72.                    in_mail.style="background-color:#96ff9f;";
  73.                    console.log("jó az email");
  74.                    mail_jo = true;
  75.                } else {
  76.                    in_mail.style="background-color:#ff8e8e;";
  77.                    console.log("nem jó az email");
  78.                }
  79.                
  80.                if (in_msg.value.length >= 1) {
  81.                    in_msg.style="background-color:#96ff9f;";
  82.                    console.log("jó az üzenet");
  83.                    msg_jo = true;
  84.                } else {
  85.                    in_msg.style="background-color:#ff8e8e;";
  86.                    console.log("nem jó az üzenet");
  87.                }
  88.                
  89.                if (name_jo === true && mail_jo === true && msg_jo === true) {
  90.                   document.getElementById('submit').disabled = 0;
  91.                    return true;
  92.                } else {
  93.                    document.getElementById('submit').disabled = 1;
  94.                    return false;
  95.                }
  96.                
  97.            }
  98.         </script>
  99.        
  100.     </body>
  101. </html>
  102.