JS-аутентификация для HTML-страницы

Я хочу добавить базовый JS-скрипт проверки имени и электронной почты на HTML-страницу, поэтому при нажатии кнопки «Отправить» он будет проверять несколько полей и выдавать ошибки, если они заполнены неправильно. К сожалению, при нажатии кнопки «Отправить» страница просто перезагружается с пустыми полями, и на HTML-странице не возникает никаких ошибок.

Я все еще изучаю JS.

Вот мой фрагмент JS для проверки имени и электронной почты:

//Check if name is anything other than letters or spaces. If it isn't throw error.
function validateForm() {
  var validEntry = /[a-zA-Z ]/;
  var x = document.forms["clientinfo"]["txtFullName"].value;
  if (x.value.match(!validEntry)) {
    alert("Invalid name. Please try again.");
    document.clientinfo.txtFullName.focus();
    return false;
  }
  // Check if email is in proper format - [email protected]. If it isn't throw error.
  var y = document.forms["clientinfo"]["txtEmail"].value;
  var validEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})/
  if (y.value.match(validEmail)) {
    return true
  } else {
    alert("Invalid email. Please try again.")
    document.clientinfo.txtEmail.focus();
    return false;
  }
}
<div id = "inputArea">
  <form name = "clientinfo" onsubmit = "return validateForm()" method = "post">
    Name:
    <input class = "Inputinfo" type = "text" name = "txtFullName" placeholder = "John Stewart" required>
    <br> Email:
    <input class = "Inputinfo" type = "text" name = "txtEmail" placeholder = "[email protected]" required>
    <br> Phone:
    <input class = "Inputinfo" type = "tel" name = "phone" placeholder = "XXX-XXX-XXXX" pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
    <br> Description:
    <br>
    <textarea class = "Inputinfo" id = "txtDescription" name = "description" rows = "8" cols = "50" placeholder = "Please enter any additional client information here."></textarea>
    <br>
    <input type = "submit" value = "Enter" id = "enterbutton">
  </form>
</div>

Как я могу решить эту проблему?

Вам нужно предотвратить действие формы по умолчанию (которое включает перезагрузку экрана) в вашей функции, передав событие и затем вызвав event.preventDefault();

mykaf 14.02.2023 22:26

Отвечает ли это на ваш вопрос? preventDefault() останавливает проверку формы

blurfus 14.02.2023 22:27

Это не нужно. Если атрибут onXXX возвращает false, действие по умолчанию предотвращается. Итак, return validateForm() делает то же самое. @mykaf

Barmar 14.02.2023 22:27
if (x.value.match(!validEntry)) должно быть if (!x.value.match(validEntry)). Вам также нужно изменить регулярное выражение, чтобы оно проверяло весь ввод.
Barmar 14.02.2023 22:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

!validEntry — это false, поэтому вы проверяете x.value.match(false) в своем первом утверждении if. Что вам нужно, так это if (!x.value.match(validEntry)), и вам нужно изменить регулярное выражение, чтобы оно соответствовало всей входной строке (в настоящее время оно ищет совпадение допустимых символов в любом месте ввода.

x.value и y.value должны быть просто x и y. Вы уже использовали .value при назначении переменных, поэтому они содержат строки, а не элементы ввода.

Чтобы упростить добавление дополнительных проверок, не делайте return true, когда электронная почта действительна. Поместите это в конец функции и просто сделайте return false в каждом из недопустимых случаев.

//Check if name is anything other than letters or spaces. If it isn't throw error.
function validateForm() {
  var validEntry = /^[a-zA-Z ]+$/;
  var x = document.forms["clientinfo"]["txtFullName"].value;
  if (!x.match(validEntry)) {
    alert("Invalid name. Please try again.");
    document.clientinfo.txtFullName.focus();
    return false;
  }
  // Check if email is in proper format - [email protected]. If it isn't throw error.
  var y = document.forms["clientinfo"]["txtEmail"].value;
  var validEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})$/
  if (!y.match(validEmail)) {
    alert("Invalid email. Please try again.")
    document.clientinfo.txtEmail.focus();
    return false;
  }
  
  return true;
}
<div id = "inputArea">
  <form name = "clientinfo" onsubmit = " validateForm(); return false" method = "post">
    Name:
    <input class = "Inputinfo" type = "text" name = "txtFullName" placeholder = "John Stewart" required>
    <br> Email:
    <input class = "Inputinfo" type = "text" name = "txtEmail" placeholder = "[email protected]" required>
    <br> Phone:
    <input class = "Inputinfo" type = "tel" name = "phone" placeholder = "XXX-XXX-XXXX" pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
    <br> Description:
    <br>
    <textarea class = "Inputinfo" id = "txtDescription" name = "description" rows = "8" cols = "50" placeholder = "Please enter any additional client information here."></textarea>
    <br>
    <input type = "submit" value = "Enter" id = "enterbutton">
  </form>
</div>

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