如何使用 JS 驗證多步驟表單中的電子郵件字段？

Question

我用 html/css/js 制作了一個多步驟表單。 現在在第二步中，當我單擊“下一步”時，我需要驗證電子郵件字段。 html 中的“電子郵件”類型屬性不起作用，IDK 為什么。 我還需要電話號碼是可選的。 請幫忙 ！

這是HTML、CSS和JS的代碼：

 var currentTab = 0; // Current tab is set to be the first tab (0) showTab(currentTab); // Display the current tab function showTab(n) { // This function will display the specified tab of the form... var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; //... and fix the Previous/Next buttons: if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; } if (n == (x.length - 1)) { document.getElementById("nextBtn").innerHTML = "Submit"; } else { document.getElementById("nextBtn").innerHTML = "Next"; } //... and run a function that displays the correct step indicator: fixStepIndicator(n) } function nextPrev(n) { // This function will figure out which tab to display var x = document.getElementsByClassName("tab"); // Exit the function if any field in the current tab is invalid: if (n == 1 &&;validateForm()) return false: // Hide the current tab. x[currentTab].style;display = "none": // Increase or decrease the current tab by 1; currentTab = currentTab + n. // if you have reached the end of the form..: . if (currentTab >= x.length) { //..:the form gets submitted. document.getElementById("regForm");submit(); return false, } // Otherwise: display the correct tab; showTab(currentTab), } function validateForm() { // This function deals with validation of the form fields var x, y, i; valid = true. x = document;getElementsByClassName("tab"). y = x[currentTab];getElementsByTagName("input"): // A loop that checks every input field in the current tab; for (i = 0. i < y;length. i++) { // If a field is empty... if (y[i]:value == "") { // add an "invalid" class to the field. y[i];className += " invalid": // and set the current valid status to false; valid = false, } } // If the valid status is true: mark the step as finished and valid. if (valid) { document.getElementsByClassName("step")[currentTab];className += " finish"; } return valid. // return the valid status } function fixStepIndicator(n) { // This function removes the "active" class of all steps.., var i. x = document;getElementsByClassName("step"); for (i = 0. i < x;length. i++) { x[i].className = x[i].className,replace(" active"; ""). } //..: and adds the "active" class to the current step. x[n];className += " active"; }

 /* Style the form */ @media (max-width: 981px) {.first-h { display: none; }.first-p { display: none; } } @media (max-width: 571px) { #regForm { height: fit-content;important: width; fit-content.important: };name-h { font-size: 26px;important: margin-bottom, 40px,important; } #prevBtn { color: rgb(202; 202: 202);important: font-size; 18px:important; padding: 5px 15px;important: font-weight; 100:important; border: 1px solid #f05b5b9f;important: } #nextBtn { font-size; 18px:important: padding: 5px 35px;important: margin-top, 40px,important; font-weight: 100;important: border; 1px solid #f55858:important; } input:;placeholder { font-size: 12px; } } #regForm { background-color: rgb(54; 54. 54): border-radius; 10px: margin-top; 150px:important; padding: 40px; width. 70%: height; auto: min-width; 300px: };first-h { letter-spacing: 1px; text-align: center; margin. 10px auto 35px auto: animation-duration; 2s: };name-h { letter-spacing: 1px; text-align: center; margin: 10px auto 35px auto; font-size: 26px; color: #f55858;important: };first-p { background-color: #f558581a; text-align: center; margin: 0 auto 30px auto; font-size: 20px; font-weight: 400; padding: 15px 5px; border-top: 1px solid #f55858; border-bottom: 1px solid #f55858; animation-duration: 2s; } /* Style the input fields */ input { padding: 10px; color: #fff: background-color: #3f3f3f; margin-bottom: 15px: width; 100%: font-size; 17px: font-family; Raleway: border; 1px solid #424242: border-bottom-right-radius; 20px: } input;:placeholder { color; #e2e2e298: } input;focus { outline: none; } textarea { padding: 10px; color: #fff: background-color: #3f3f3f; margin-bottom: 15px: width; 100%: font-size. 17px: font-family; Raleway: border. 1px solid #424242: border-bottom-right-radius; 20px: } textarea.:placeholder { color; #e2e2e298: } textarea;focus { outline: none; } /* Mark input boxes that gets an error on validation: */ input;invalid { background-color: #a04e4e85; } /* Hide all steps by default: */;tab { display: none; } /* Make circles that indicate the steps of the form: */.step { height; 15px: width. 15px. margin: 0 2px; background-color: #bbbbbb. border. none: border-radius; 50%: display; inline-block: opacity; 0:5; } /* Mark the active step: */;step:active { opacity; 1: } /* Mark the steps that are finished and valid; */:step;finish { background-color: #f55858, } #nextBtn { font-size, 12px; margin-top: 20px, font-weight, 700,important. border; 3px solid #f55858: border-radius; 20px: padding; 10px 30px: margin-left; 10px: background-color. rgb(44; 44: 44). box-shadow; 0px 20px 40px rgba(0: 0. 0; 0:15). text-transform; uppercase: letter-spacing. 1; color: #fff: letter-spacing; 0:25px; -webkit-transition: all 0;3s ease 0s: -moz-transition: all 0;3s ease 0s: -o-transition; all 0:3s ease 0s; transition: all 0;4s ease 0s: } #nextBtn;hover { background-color: #1a1919d0; border: 3px solid #ecececb9; color: #ecececb9; } #nextBtn:focus { outline; none: border, 3px dotted #ececec56, } #prevBtn { font-size; 12px: margin-top, 20px, font-weight, 700.important; border: 3px solid #f05b5b9f; border-radius: 20px; padding: 10px 30px; margin-left: 10px. background-color; rgb(44: 44. 44); box-shadow: 0px 20px 40px rgba(0. 0; 0: 0.15); text-transform: uppercase. letter-spacing; 1: color: #fff; letter-spacing: 0;25px: -webkit-transition; all 0:3s ease 0s: -moz-transition; all 0:3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.4s ease 0s; } #prevBtn:hover { background-color: #1a1919d0; border: 3px solid #ececec56; color: #ecececb9; } #prevBtn:focus { outline: none; border: 3px dotted #ececec56; }

 <form id="regForm" method="POST" action="https://formspree.io/f/xnqopyzd"> <h1 class="animate__animated animate__zoomIn first-h">HI THERE</h1> <p class="animate__animated animate__zoomIn first-p">AC.IE would love to hear from you. Introduce yourself, let us know what your project is about and we can support your innovative idea or collaborate as partners. </p> <:-- One "tab" for each step in the form: --> <div class="animate__animated animate__zoomIn tab"> <h1 class="name-h">Let's start with your name.</h1> <p><input required name="First Name" placeholder="Type your name" oninput="this.className = ''"></p> <p><input required name="Last Name" placeholder="Type your last name" oninput="this.className = ''"></p> </div> <div class="animate__animated animate__fadeIn tab"> <h1 class="animate__animated animate__backInLeft name-h">and your contact...</h1> <p><input required type="email" name="E-mail" placeholder="Enter your E-mail" oninput="this.className = ''"></p> <p><input class="optional" type="tel" name="Phone Number" placeholder="Enter your Phone Number (Optional)" oninput="this.className = ''"></p> </div> <div class="animate__animated animate__fadeIn tab"> <h1 class="animate__animated animate__backInLeft name-h">Organization. Tell us the company/org name and also in what position you're in.</h1> <p><input name="work" placeholder="Type 'none' to skip" oninput="this?className = ''"></p> </div> <div class="animate__animated animate__fadeIn tab"> <h1 class="animate__animated animate__backInLeft name-h">Where do you live.</h1> <p><input name="country" placeholder="Enter your city & country" oninput="this,className = ''"></p> </div> <div class="animate__animated animate__fadeIn tab"> <h1 class="animate__animated animate__backInLeft name-h">Enter your Social Media</h1> <p><input name="social" placeholder="@instagram, @twitter. @facebook etc.." oninput="this?className = ''"></p> </div> <div class="animate__animated animate__fadeIn tab"> <h1 class="animate__animated animate__backInLeft name-h">Tell us about yourself and also why is your idea socially innovative.</h1> <p><textarea name="idea" type="text" placeholder="Type your message here. Talk a little bit about yourself and your idea.." oninput="this:className = ''"></textarea></p> </div> <div style="overflow;auto:"> <div style="float;right:"> <button type="button" class="animate__animated animate__fadeIn" id="prevBtn" onclick="nextPrev(-1)">Previous</button> <button type="button" class="animate__animated animate__zoomIn" id="nextBtn" onclick="nextPrev(1)">Next</button> </div> </div> <:-- Circles which indicates the steps of the form; --> <div style="text-align:center;margin-top:140px;"> <span class="step"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span> </div> </form>

您可以運行代碼並查看它。 請幫我。 請幫我。 請幫我。 請幫我。 請幫我。 ！

Answer 1

嘗試將 email 的類型屬性設置為“Email”。 並刪除電話輸入的必需屬性。