Требовать, чтобы все поля в форме были отмечены - PullRequest
Новая
       5

Требовать, чтобы все поля в форме были отмечены

0 голосов
/ 22 декабря 2019

Я пытаюсь получить форму, требующую, чтобы все флажки были отмечены, чтобы указать, что человек прочитал все разделы, прежде чем разрешить отправку. HTML похож на 

     function checkform()
    {
	if (!this.rsa.secOne.checked)
	{
	
		alert('All boxes must be checked');
		return false;
	}
	else if (!this.rsa.secTwo.checked)
	{
	
		alert('All boxes must be checked');
		return false;
	}
      else if (!this.rsa.secThree.checked)
	{
		alert('All boxes must be checked');
		return false;
	}

	return true;
    }
    <!DOCTYPE html>
    <html lang="en-US">
      <head>
        <link href="style.css" rel="stylesheet">
        <meta charset="utf-8">
        <title>Exhibit C</title>
      </head>
      <body>
           <form action="rsaOne.php" method="post" onsubmit="return checkForm(this);" id="rsa" name="rsa">
              <input type="checkbox" id="secOne" name="secOne"><b>SECTION 1. </b><u>

Я получаю, контрольная форма не определена. Как я могу изменить это, чтобы заставить это работать? Всего имеется 23 флажка, я могу скопировать остальные, если снова и снова, и изменить идентификатор, если кто-то может просто сказать мне, что нужно изменить, чтобы это работало.

Ответы [ 3 ]

1 голос
/ 22 декабря 2019

Использование required:

Просто добавьте атрибут required к каждому элементу ввода следующим образом: 

<input type="checkbox" id="secOne" name="secOne" required>
<input type="checkbox" id="secTwo" name="secTwo" required>

Использование HTMLFormElement.elements для динамического задания атрибута required с помощью JavaScript:

Если имеется слишком много флажков и / или вы хотите динамически использовать JavaScript для добавления атрибута required ко всем вашим флажкам, вы можете просто использовать HTMLFormElement.elements свойство, чтобы получить все элементы управления формой (здесь, ваши флажки) внутри вашей формы, а затем использовать метод Array.from () , чтобы получить мелко скопированный массив HTMLFormControlsCollection , который теперь можно зациклить и использовать метод setAttribute () для динамической установки атрибута required для всех флажков.

Проверьте и запустите следующий фрагмент кода или откройте эту JSFiddle ссылку для практического примера вышеупомянутого подхода: 

// get the form
const form = document.getElementById("rsa");

// get the form controls
let x = form.elements;

// Convert the list of form controls to an array and set the required attribute to each control
Array.from(x).forEach(e => {
	e.setAttribute("required", ""); 
})
<form action="rsaOne.php" method="post" onsubmit="return checkForm(this);" id="rsa" name="rsa">
    <input type="checkbox" id="secOne" name="secOne" required>
    <input type="checkbox" id="secTwo" name="secTwo" required>
    <input type="checkbox" id="secThree" name="secThree" required>
    <input type="checkbox" id="secFour" name="secFour" required>
    <button type="submit">SUBMIT</button>
</form>
1 голос
/ 22 декабря 2019

Это будет работать: 

function checkForm() {
  return [...document.querySelectorAll(".reqCheck")].every(el => el.checked)
}

Отформатировано для целей тестирования: 

function checkForm() {
  const allChecked = [...document.querySelectorAll(".reqCheck")].every(el => el.checked)
  console.log(allChecked)
  return allChecked
}
<form action="rsaOne.php" onsubmit="return checkForm()" id="rsa" name="rsa">
  <input type="checkbox" class="reqCheck" name="secOne" id="secOne">
  <label for="secOne"> SECTION 1.</label><br />
  <input type="checkbox" class="reqCheck" name="secTwo" id="secTwo">
  <label for="secTwo">SECTION 2.</label><br />
  <input type="checkbox" class="reqCheck" name="secThree" id="secThree">
  <label for="secThree"> SECTION 3.</label><br />
  <input type="submit" value="Submit" />
</form>
0 голосов
/ 22 декабря 2019

Вы получили ошибку, потому что вы положили checkForm() с заглавной буквой F в обратный вызов onSubmit, но когда вы создали функцию, это checkform().

Просто измените checkForm() на checkform()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...