GVGA :: GAMF források

Web I - JavaScript validálás

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

Reply to "Web I - JavaScript validálás"