Блог

Главная - Вопросы по программированию - Форма проверки с помощью JavaScript

Форма проверки с помощью JavaScript

#javascript #validation

#javascript #проверка

Вопрос:

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

Я впервые пробую это, пожалуйста, наберитесь терпения:

 var registrationForm, elSelectGender, elGenderHint, elTerms, elTermsHint; // Declare variables
registrationForm = document.getElementById('registrationForm'); // Store elements
elSelectGender = document.getElementById('gender');
elGenderHint = document.getElementById('genderHint');
elTerms = document.getElementById('terms');
elTermsHint = document.getElementById('termsHint');
elName = document.getElementById('firstName');
elNameHint = document.getElementById('nameHint');

function checkName(event) {
  if (elSelectGender.valueOf() == null) { // If name not entered
    elNameHint.innerHTML = 'You must insert your name.'; // Show message
    event.preventDefault(); // Don't submit form
  }
}

function checkGender(event) {
  if (elSelectGender.valueOf() == 'Select an option:') { // If gender not selected
    elGenderHint.innerHTML = 'You must select a gender.'; // Show message
    event.preventDefault(); // Don't submit form
  }
}

function checkTerms(event) {
  if (!elTerms.checked) { // If check-box ticked
    elTermsHint.innerHTML = 'You must agree to the terms.'; // Show message
    event.preventDefault(); // Don't submit form
  }
}

//Create event listeners: submit calls checkTerms(), change calls packageHint()
registrationForm.addEventListener('submit', checkName, false);
registrationForm.addEventListener('submit', checkGender, false);
registrationForm.addEventListener('submit', checkTerms, false); 
 <!DOCTYPE HTML>
<html>
<form id="registrationForm" name="registrationForm" method="post" action="example.html">

  <div>
    <label for="firstName" class="input"> Name: </label>
    <input name="firstName" class="form-control" id="firstName" placeholder="First Name" type="text" />
    <div id="nameHint" class="warning"></div>
  </div>

  <div>
    <label for="gender" class="selectbox"> Gender: </label>
    <select id="gender">
      <option value="Select an option:">Select an option:</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
      <option value="I prefer not to say">I prefer not to say</option>
    </select>
    <div id="genderHint" class="warning"></div>
  </div>

  <div>
    <input type="checkbox" id="terms" />
    <label for="terms" class="checkbox"> Check to agree to terms amp;amp; conditions</label>
    <div id="termsHint" class="warning"></div>
  </div>

  <input class="btn btn-primary" id="submitButton" type="submit" value="Sign up for G Holiday" />
</form>

</html>

Я ожидаю получить предупреждающее сообщение и проверку для всех трех элементов. Если один из трех элементов не проверен, он не должен переходить на следующую страницу.
По какой-то причине это работает только для флажка, два других элемента игнорируются.

Комментарии:

1. Выполните некоторую базовую отладку. console.log(elSelectGender.valueOf()) .

2. Чтобы проверить правильность поля name, используйте if(elName.value == "") {} ; значения поля ввода никогда null .

3. для проверки правильности использования пола if (elSelectGender.value === 'Select an option:') {...

4. @Trace имейте в виду, что это комментарии, а не ответы. То есть: никто не прокомментировал обрезку и т.д., что (надеюсь) ожидается в правильном ответе.

5. @RokoC. Булджан согласился

Ответ №1:

Я бы перенес выборки и входные данные в label CSS и использовал бы его для отображения сообщений об .warning ошибках.
Чем я бы воспользовался Array.prototype.some() для проверки того, что какой-либо из моих элементов не проходит проверку, чем использовать ev.preventDefault() и отображать предупреждения:

 const EL = sel => document.querySelector(sel),
  warning = (el, err) => [err, el.closest('label').classList.toggle('is-error', err)][0],
  noValue = el => warning(el, !el.value.trim()),
  noCheck = el => warning(el, !el.checked),
  checkFormRegistration = ev => {
    const isSomeInvalid = [
      noValue(EL('#firstName')),
      noValue(EL('#gender')),
      noCheck(EL('#terms'))
    ].some(b => b);
    if (isSomeInvalid) ev.preventDefault();
  };

EL('#registrationForm').addEventListener('submit', checkFormRegistration); 
 label.is-error > *{
  outline: 1px solid red;
  outline-offset: -1px;
}
label   .warning {
  display: none;
  color: red;
}
label.is-error   .warning {
  display: block;
} 
 <form id="registrationForm" name="registrationForm" method="post" action="example.html">

  <div>
    <label> Name:
      <input name="firstName" class="form-control" id="firstName" placeholder="First Name" type="text">
    </label>
    <div class="warning">Please, enter a name</div>
  </div>

  <div>
    <label> Gender: 
      <select id="gender">
        <option value="">Select an option:</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
        <option value="I prefer not to say">I prefer not to say</option>
      </select>
    </label>
    <div class="warning">Please, select a gender</div>
  </div>

  <div>
    <label>
      <input type="checkbox" id="terms">
      Check to agree to terms amp;amp; conditions
    </label>
    <div class="warning">You must agree to the terms</div>
  </div>

  <input class="btn btn-primary" id="submitButton" type="submit" value="Sign up for G Holiday">
</form>

Комментарии:

1. Кажется, что код работает, появляется сообщение об ошибке, но это не мешает ему открывать новую страницу

2. @GeorgeS Как вы можете видеть — работает в приведенном выше примере (форма отправляется, только если все проверки пройдены). Возможно, вы пропустили некоторые изменения в HTML или JS, которые я внес. (Например, именование аргументов… HTML-метки в качестве оболочек… Я действительно не знаю … не могли бы вы поделиться своим текущим фрагментом?)

3. Извините, произошел конфликт с остальной частью кода. Да, теперь она работает отлично. Большое спасибо!

Ответ №2:

Я изменил valueOf() значение на value равное пустому (когда форма инициализируется, поле пустое, это не null так).

Убедитесь, что ваши HTML-элементы верны, раньше я видел, что это было неправильно, теперь, похоже, это исправлено.

Я добавил else инструкцию для обработки ошибок в случае, когда пользователь исправляет ошибки проверки.

Тем не менее, это довольно упрощенная проверка, она требует гораздо больше работы (такие вещи, как минимальная длина, максимальная длина, которые вы, возможно, захотите рассмотреть и их, а также очистка, обрезка, как упоминалось некоторыми комментаторами, которые я оставлю вам).

 var registrationForm, elSelectGender, elGenderHint, elTerms, elTermsHint; // Declare variables
registrationForm = document.getElementById('registrationForm'); // Store elements
elSelectGender = document.getElementById('gender');
elGenderHint = document.getElementById('genderHint');
elTerms = document.getElementById('terms');
elTermsHint = document.getElementById('termsHint');
elName = document.getElementById('firstName');
elNameHint = document.getElementById('nameHint');

function checkName(event) {
  if (elName.value == '') { // If name not entered
    elNameHint.innerHTML = 'You must insert your name.'; // Show message
    event.preventDefault(); // Don't submit form
  } else {
    elNameHint.innerHTML = '';
  }
}

function checkGender(event) {
  if (elSelectGender.value == 'Select an option:') { // If gender not selected
    elGenderHint.innerHTML = 'You must select a gender.'; // Show message
    event.preventDefault(); // Don't submit form
  } else {
    elGenderHint.innerHTML = '';
  }
}

function checkTerms(event) {
  if (!elTerms.checked) { // If check-box ticked
    elTermsHint.innerHTML = 'You must agree to the terms.'; // Show message
    event.preventDefault(); // Don't submit form
  } else {
    elTermsHint.innerHTML = '';
  }
}

//Create event listeners: submit calls checkTerms(), change calls packageHint()
registrationForm.addEventListener('submit', checkName, false);
registrationForm.addEventListener('submit', checkGender, false);
registrationForm.addEventListener('submit', checkTerms, false); 
 <!DOCTYPE HTML>
<html>
<form id="registrationForm" name="registrationForm" method="post" action="example.html">

  <div>
    <label for="firstName" class="input"> Name: </label>
    <input name="firstName" class="form-control" id="firstName" placeholder="First Name" type="text" />
    <div id="nameHint" class="warning"></div>
  </div>

  <div>
    <label for="gender" class="selectbox"> Gender: </label>
    <select id="gender">
      <option value="Select an option:">Select an option:</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
      <option value="I prefer not to say">I prefer not to say</option>
    </select>
    <div id="genderHint" class="warning"></div>
  </div>

  <div>
    <input type="checkbox" id="terms" />
    <label for="terms" class="checkbox"> Check to agree to terms amp;amp; conditions</label>
    <div id="termsHint" class="warning"></div>
  </div>

  <input class="btn btn-primary" id="submitButton" type="submit" value="Sign up for G Holiday" />
</form>

</html>

Комментарии:

1. Спасибо вам за это и за ваши предложения.

Метки: