API tools faq
paste
Advertisement
Patrikrizek

lesson-8-form-short

Patrikrizek
Jul 7th, 2022
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.07 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.         /* Here you can insert your internal CSS */
  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.             <!-- The JavaScript fucntion "validateCustomerDetails()" is called when the submit button clicked. -->
  84.             <input type="submit" onclick="validateCustomerDetails()" value="Submit">
  85.             <br>
  86.  
  87.             <!-- JS -->
  88.             <script>
  89.                 // Here the fucntion "validateCustomerDetails()" starts.
  90.                 function validateCustomerDetails() {
  91.  
  92.                     // First we need to save the values from the form into variables.
  93.                     // Find values of relevant elemenents according theirs IDs and save them in the variables.
  94.  
  95.                     // Search trought the document and find an element with the ID "fname" and save its value to variable named "var fname".
  96.                     var fname = document.getElementById("fname").value;
  97.                     var lname = document.getElementById("lname").value;
  98.                     var fullName = fname + " " + lname;
  99.  
  100.                     var companyName = document.getElementById("cname").value;
  101.  
  102.                     var street = document.getElementById("street").value;
  103.                     var city = document.getElementById("city").value;
  104.                     var postcode = document.getElementById("postcode").value;
  105.                     var country = document.getElementById("country").value;
  106.                     // Combine values of street, city, postcode and country, add spaces between them and save them into variable named "var address".
  107.                     var address = street + " " + city + " " + postcode + " " + country;
  108.                    
  109.                     var phone = document.getElementById("phone").value;
  110.                     var email = document.getElementById("email").value;
  111.                     var note = document.getElementById("note").value;
  112.                    
  113.                     // Regexr Patterns
  114.                     // Here we storing a correct input formating for each individual form field.
  115.                     var fNameCheckPattern = /^[a-zA-Z]+$/;
  116.                     var lNameCheckPattern = /^[a-zA-Z]+$/;
  117.                     var cityCheckPattern = /^[a-zA-Z]+$/;
  118.                     var phoneCheckPattern =  /[0-9]{9}/;
  119.                     var emailCheckPattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
  120.  
  121.                     // Validation if statemnts
  122.                     // Here we are checking if the patterns and value from form fields meeting criteria.
  123.                     // Test if varible "fname" is NOT matching the pattern "fNameCheckPattern". If NOT then search entire document and find element with ID "fname" focus on it and display the alert message "Only characters are allowed."
  124.                     if(!fNameCheckPattern.test(fname)) { document.getElementById("fname").focus(); alert("Only characters are allowed."); }
  125.                    
  126.                     else if (!lNameCheckPattern.test(lname)) { document.getElementById("lname").focus(); alert("Only characters are allowed."); }
  127.  
  128.                     else if (!cityCheckPattern.test(city)) { document.getElementById("city").focus(); alert("Only characters are allowed."); }
  129.  
  130.                     else if (!phoneCheckPattern.test(phone)) { document.getElementById("phone").focus(); alert("Only digits are allowed. Example of format: 0132465798"); }
  131.  
  132.                     else if (!emailCheckPattern.test(email)) { document.getElementById("email").focus(); alert("Input correct email. Example: John.smith@email.com"); }
  133.  
  134.                     else {
  135.                         // If all the inputs from form field are correct call function named "printCusomerDetails()".
  136.                         printCustomerDetails();
  137.                     }
  138.  
  139.                     // Output the result
  140.                     // Here we are creating function named "printCusomerDetails()"
  141.                     function printCustomerDetails() {
  142.                         // Search trough entire document and find an element with ID "outputFullName". Once find insert HTML code in it "<b>Full Name: </b>" plus value of the variable "fullName."
  143.                         document.getElementById("outputFullName").innerHTML = "<b>Full Name: </b>" + fullName;
  144.                         document.getElementById("outputCompanyName").innerHTML = "<b>Company Name: </b>" + companyName;
  145.                         document.getElementById("outputAddress").innerHTML = "<b>Address: </b>" + address;
  146.                         document.getElementById("outputPhone").innerHTML = "<b>Phone: </b>" + phone;
  147.                         document.getElementById("outputEmail").innerHTML = "<b>Email: </b>" + email;
  148.                         document.getElementById("outputNote").innerHTML = "<b>Note: </b>" + note;
  149.                     }
  150.  
  151.                 }
  152.  
  153.             </script>
  154.         </form>
  155.  
  156.         <!-- Form - Expedition Details -->
  157.  
  158.         <!-- Printed Forms -->
  159.         <div id="print">
  160.             <h2>Your display output</h2>
  161.  
  162.             <h3>Customer Details</h3>
  163.             <p id="outputFullName">Full name:</p>
  164.             <p id="outputCompanyName">Company name:</p>
  165.             <p id="outputAddress">Address:</p>
  166.             <p id="outputPhone">Phone:</p>
  167.             <p id="outputEmail">Email:</p>
  168.             <p id="outputNote">Note:</p>
  169.  
  170.             <h3>Expedition Details</h3>
  171.         </div>
  172.  
  173.     </div>
  174.  
  175. </body>
  176. </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!