Многошаговая форма с проблемой проверки электронной почты

Я реализую эту многошаговую форму с проверкой на моем веб-сайте: https://www.w3schools.com/howto/howto_js_form_steps.asp

Все работает отлично, я немного изменил код, чтобы также проверить выпадающие списки.

Моя проблема в том, что я не могу получить адрес электронной почты для проверки в качестве адреса электронной почты. Он проверяет, есть ли в поле моего адреса электронной почты что-то, но не фактический ли это адрес электронной почты или нет.

Это мой рабочий 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("tabStep");
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("tabStep");
// 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("mobileReg").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}

function validateForm() {
// This function deals with validation of the form fields
var x, y, z, i, valid = true;
x = document.getElementsByClassName("tabStep");
y = x[currentTab].getElementsByTagName("input");
z = x[currentTab].getElementsByTagName("select");

// 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;
 }
}
for (i = 0; i < z.length; i++) {
// If a field is empty...
if (z[i].value == "") {
  // add an "invalid" class to the field:
  z[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";
}

Я попытался включить следующее в функцию validateForm(), но просто не смог заставить меня работать:

function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}

Я также посмотрел на: Как проверить адрес электронной почты в JavaScript? но просто не могу реализовать его в этом сценарии, не убивая его.

Любые указатели будут высоко оценены

Большое спасибо

D

0 ответов

Другие вопросы по тегам