API tools faq
paste
Advertisement
Patrikrizek

lesson-8-index

Patrikrizek
Mar 24th, 2022
70
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JavaScript Validation Form</title>
  8.     <!-- CSS -->
  9.     <style>
  10.  
  11.     </style>
  12.  
  13. </head>
  14. <body>
  15.     <!-- Header -->
  16.     <header>
  17.         <h1>Oder and Validation From</h1>
  18.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, adipisci assumenda eum deleniti provident sapiente magnam enim repellat autem qui.</p>
  19.     </header>
  20.  
  21.  
  22.     <!-- Main -->
  23.     <div id="main">
  24.         <!-- Form - Customer Details -->
  25.         <h2>Customer Details</h2>
  26.         <form>
  27.             <label for="fname">First Name*</label>
  28.             <br>
  29.             <input type="text" name="fname" id="fname" placeholder="John" pattern="[A-Za-z]" required>
  30.             <br>
  31.  
  32.            
  33.             <label for="lname">Last Name*</label>
  34.             <br>
  35.             <input type="text" name="lname" id="lname" placeholder="Smith" pattern="[A-Za-z]" required>
  36.             <br>
  37.  
  38.             <label for="cname">Company name (optional)</label>
  39.             <br>
  40.             <input type="text" name="cname" id="cname" placeholder="Your company name">
  41.             <br>
  42.  
  43.             <label for="country">Country*</label>
  44.             <br>
  45.             <select name="counry" id="country">
  46.                 <option value="UK">UK</option>
  47.                 <option value="Spain">Spain</option>
  48.             </select>
  49.  
  50.             <label for="street">Street*</label>
  51.             <br>
  52.             <input type="text" name="street" id="street" placeholder="1st address line" required>
  53.             <br>
  54.  
  55.             <label for="city">Town / City*</label>
  56.             <br>
  57.             <input type="text" name="city" id="city" placeholder="London" pattern="[A-Za-z]" required>
  58.             <br>
  59.  
  60.  
  61.             <label for="postcode">Postcode*</label>
  62.             <br>
  63.             <input type="text" name="postcode" id="postcode" placeholder="SE16 8PL" required>
  64.             <br>
  65.  
  66.             <label for="phone">Phone Number</label>
  67.             <br>
  68.             <input type="number" name="phone" id="phone" placeholder="012345679" pattern="[0-9]{9}">
  69.             <br>
  70.  
  71.             <label for="email">Email address*</label>
  72.             <br>
  73.             <input type="email" name="email" id="email" placeholder="john.smith@email.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
  74.             <br>
  75.  
  76.             <label for="note">Note, optional</label>
  77.             <br>
  78.             <textarea name="note" id="note" rows="4" cols="50" maxlength="250" placeholder="Enter your note here. (limited to 250 characters).">
  79.  
  80.             </textarea>
  81.             <br>
  82.  
  83.             <input type="submit" onclick="validateCustomerDetails()" value="Submit">
  84.             <br>
  85.  
  86.             <!-- JS -->
  87.             <script>
  88.                 function validateCustomerDetails() {
  89.                     //Find values of IDs
  90.                     var fname = document.getElementById("fname").value;
  91.                     var lname = document.getElementById("lname").value;
  92.                     var fullName = fname + " " + lname;
  93.  
  94.                     var companyName = document.getElementById("cname").value;
  95.  
  96.                     var street = document.getElementById("street").value;
  97.                     var city = document.getElementById("city").value;
  98.                     var postcode = document.getElementById("postcode").value;
  99.                     var country = document.getElementById("country").value;
  100.                     var address = street + " " + city + " " + postcode + " " + country;
  101.                    
  102.                     var phone = document.getElementById("phone").value;
  103.                     var email = document.getElementById("email").value;
  104.                     var note = document.getElementById("note").value;
  105.                    
  106.                     //Regexr Patterns
  107.                     var fNameCheckPattern = /^[a-zA-Z]+$/;
  108.                     var lNameCheckPattern = /^[a-zA-Z]+$/;
  109.                     var cityCheckPattern = /^[a-zA-Z]+$/;
  110.                     var phoneCheckPattern =  /[0-9]{9}/;
  111.                     var emailCheckPattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
  112.  
  113.                     //Validation if statemnts
  114.                     if(!fNameCheckPattern.test(fname)) { document.getElementById("fname").focus(); alert("Only characters are allowed."); }
  115.                    
  116.                     else if (!lNameCheckPattern.test(lname)) { document.getElementById("lname").focus(); alert("Only characters are allowed."); }
  117.  
  118.                     else if (!cityCheckPattern.test(city)) { document.getElementById("city").focus(); alert("Only characters are allowed."); }
  119.  
  120.                     else if (!phoneCheckPattern.test(phone)) { document.getElementById("phone").focus(); alert("Only digits are allowed. Example of format: 0132465798"); }
  121.  
  122.                     else if (!emailCheckPattern.test(email)) { document.getElementById("email").focus(); alert("Input correct email. Example: John.smith@email.com"); }
  123.  
  124.                     else {
  125.                         printCustomerDetails();
  126.                     }
  127.  
  128.                     //Output the result
  129.                     function printCustomerDetails() {
  130.                         document.getElementById("outputFullName").innerHTML = "<b>Full Name: </b>" + fullName;
  131.                         document.getElementById("outputCompanyName").innerHTML = "<b>Company Name: </b>" + companyName;
  132.                         document.getElementById("outputAddress").innerHTML = "<b>Address: </b>" + address;
  133.                         document.getElementById("outputPhone").innerHTML = "<b>Phone: </b>" + phone;
  134.                         document.getElementById("outputEmail").innerHTML = "<b>Email: </b>" + email;
  135.                         document.getElementById("outputNote").innerHTML = "<b>Note: </b>" + note;
  136.                     }
  137.  
  138.                 }
  139.  
  140.             </script>
  141.         </form>
  142.  
  143.         <!-- Form - Expedition Details -->
  144.  
  145.         <!-- Printed Forms -->
  146.         <div id="print">
  147.             <h2>Your display output</h2>
  148.  
  149.             <h3>Customer Details</h3>
  150.             <p id="outputFullName">Full name:</p>
  151.             <p id="outputCompanyName">Company name:</p>
  152.             <p id="outputAddress">Address:</p>
  153.             <p id="outputPhone">Phone:</p>
  154.             <p id="outputEmail">Email:</p>
  155.             <p id="outputNote">Note:</p>
  156.  
  157.             <h3>Expedition Details</h3>
  158.         </div>
  159.  
  160.     </div>
  161.  
  162. </body>
  163. </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!