Хватит делать форму, чтобы перезагрузить страницу

Question

Мне нужна помощь!

Мне нужно, чтобы, после того как пользователь отправил форму ниже, электронная почта была подтверждена, отобразилось предупреждение и изменилась часть экрана с сообщением «Добро пожаловать + электронная почта» для хотя бы 5se c.

<form name="formcontact1" action="#">
    <input type='text' name='email' size="36" placeholder="Your e-mail :)"/>
    <input type="submit" name="submit" value="SUBMIT" onclick="ValidateEmail(document.formcontact1.email)" />
</form>

У меня есть следующий скрипт для проверки работоспособности электронной почты!

function ValidateEmail(inputText) {

  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (inputText.value.match(mailformat)) {
    alert("Email " + inputText.value + " has been sent");
    document.getElementById('title1').innerHTML = 'Welcome ' + inputText.value;
    return true;

  }
  else {
    alert("Invalid Email");
    document.formcontact1.email.focus();
    return false;
  }

}

После нажатия кнопки отображается предупреждение «EMAIL». ххх отправлено "(правильно).

Мне нужно обновить часть страницы с сообщением "WELCOME xxxxx".

Проблема в том, что после появления предупреждающего сообщения. Это обновляет часть страницы, но перезагружает. Есть ли способ избежать этого и подождать 5 секунд перед перезагрузкой? СПАСИБО !!!

Answer 1

Если я вас правильно понимаю, вы хотите использовать функцию protectDefault (), которая останавливает поведение по умолчанию при обновлении страницы в функции отправки формы https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

, а затем используйте setTimeout () - функция ожидания х количество секунд.

<form name="formcontact1" action="#">
    <input type='text' name='email' size="36" placeholder="Your e-mail :)"/>
    <input type="submit" name="submit" value="SUBMIT" onclick="ValidateEmail(event, document.formcontact1.email)" />
</form>

ValidateEmail(event, inputText) {
event.preventDefault();


  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (inputText.value.match(mailformat)) {
    alert("Email " + inputText.value + " has been sent");
    document.getElementById('title1').innerHTML = 'Welcome ' + inputText.value;
    return true;

  }
  else {
    alert("Invalid Email");
    document.formcontact1.email.focus();
    return false;
  }

}

Answer 2

Если вы не хотите, чтобы браузер вызывал встроенный обработчик события submit (который перезагружает страницу), вам нужно будет также вернуть false в успешной ветви проверки. Затем добавьте setTimeout call туда прямо перед возвратом false, который перезагрузит страницу, используя window.location.reload() после задержки.

UPD: часть обработчика будет выглядеть так:

if (inputText.value.match(mailformat)) {
    alert("Email " + inputText.value + " has been sent");
    document.getElementById('title1').innerHTML = 'Welcome ' + inputText.value;
    setTimeout(function() {location.reload();}, 5000);
}
else {
 // same as before
}
return false; // for both branches