Невозможно использовать javascript для проверки флажка и радио в форме

Я хочу, чтобы форма появлялась без ввода или выбора значений и предотвращала разрывы страниц (при нажатии кнопки «Отправить»). Однако, когда я использовал только функцию check(myForm), я смог успешно всплыть и предотвратить переход на страницу после нажатия кнопки «Отправить» (когда ничего не было заполнено и выбрано). Но когда я добавляю функцию checkButons(FRM), нажимаю «Отправить» (когда ничего не было заполнено и не выбрано), и страница переходит прямо к ней.

Раньше у меня было две радиостанции, так что работает. Но когда я заменил его флажком, это не сработало.

Ниже приведен мой код

<script>
function check(myForm){
     if (myForm.username.value= = ""){
         window.alert("Required field Name is empty.\n");
         return false;}
	 if (myForm.vehicleregistration.value= = ""){
         window.alert("Required field Vehicle Registration is empty.\n");
         return false;}
	 if (myForm.type[].length == 0){
         window.alert("Required field Vehsdsdle Registration is empty.\n");
         return false;}
	 else {return true;}
}


// checks buttons (radio, checkbox) - coursesweb.net 
function checkButons(frm) { 
 var re = false; // used to determine when a button is checked 
 var err = ''; // to store the errors 
 
 var type = frm.type; // contains an array with all radio buttons 'vegetable' 
 
 // create an Array in JSonn format with checkbox buttons 
 var days = frm.days; 
 
 // traverse the radio buttons 
 // if one is checked sets re to true, and stops the iteration with 'break' 
 for(var i=0; i<type.length; i++) { 
 if (type[i].checked == true) { 
 re = true; 
 break; 
 } 
 } 
 
 // if 're' is false means no radio button checked, add error in 'err'  
 if (re == false) err += '- You must check at least one vegetable'; 
 
 // make 're' again False, and traverse the checkbox buttons 
 // if one is checked sets re to true, and stops the iteration with 'break' 
 re = false 
 for(var i=0; i<days.length; i++) { 
 if (days[i].checked == true) { 
 re = true; 
 break; 
 } 
 } 
 
 // if 're' is false means no checkbox button checked, add error in 'err'  
 if (re == false) err += '\n - You must check at least one fruit'; 
 
 // if 'err' not empty, alert the error(s) and returns False to stop submitting form 
 if (err != '') { 
 alert(err); 
 return false; 
 } 
 else return re; 
}
</script>

<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parking Permit Application</title>
</body> 
</html>





</head>
<body>

<h1>Parking Permit Application</h1>
<p>If you would like to apply for a parking permit, please enter your details into the form below.</p>

</body> 

<form method = "post" name = "ass" action = "q3.php" onsubmit = "return check(this), checkButons(this)">

<table>
		<tr>
		<td><div>Name:</div></td>
        		
	<td><input name = "username" type = "text"></td> <br>
	    </tr>
        <tr>
		<td><div>Vehicle Registration:</div></td>
        <td>		
	<input name = "vehicleregistration" type = "text"> <br></td>
	</tr>
	<tr>
    <td><div>Vehicle Type:</div></td>
    <td>	
	<input name = "type[]" type = "radio" value = "Car">Car
	<input name = "type[]" type = "radio" value = "Van">Van
	<input name = "type[]" type = "radio" value = "Bike">Bike
	    </td>
		</tr>
        
		<tr>
        <td><div>Day:</div></td>
        <td>		
	<input name = "days[]" type = "checkbox" value = "Monday" >M
	<input name = "days[]" type = "checkbox" value = "Tuesday">Tu
	<input name = "days[]" type = "checkbox" value = "Wednsday">W
	<input name = "days[]" type = "checkbox" value = "Thursday">Th
	<input name = "days[]" type = "checkbox" value = "Friday">F
	<br>
	</td>
	</tr>
	<tr>
        <td><div>Priority Cases:</div></td>
        <td>		
	<select name = "prioritycases">
	<option selected = "">-</option>
	<option value = "Child in nursery">Child in nursery</option>
	<option value = "Blue badge holder">Blue badge holder</option>
	<option value = "Work van">Work van</option>
	<option value = "Professor">Professor</option>
	</select><br>
	</td>
	</tr>
	<tr>
	<div id = "msg"></div>
	<td></td><td><input type = "submit" value = "Submit" name = "sub"></td>
	</tr>
</table>
</form>
</html>

Пожалуйста, помогите мне увидеть, что с ним не так?

javascript html

15.03.2019 02:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Добро пожаловать в Stack Overflow Лесли :)

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

function check() {
    if (document.querySelector('[name = "username"]').value= = ""){
      alert("Required field Name is empty.\n");
      this.preventDefault();
      return false;
    }
    if (doucment.querySelector('[name = "vehicleregistration"]').value= = ""){
      alert("Required field Vehicle Registration is empty.\n");
      return false;
    }
    if (document.querySelectorAll('[name = "type[]"]:checked').length == 0){
      alert("Required field Vehsdsdle Registration is empty.\n");
      return false;
    }
    if (document.querySelectorAll('[name = "days[]"]:checked').length == 0){
        alert("Must select at least one day.");
      return false;
    }

    return true; //It will hit here if none of the if statements are true
});

Большое спасибо, Мэтью. Но это все еще не работает. Вот такая ситуация: только одно "Обязательное поле Имя пусто". всплывает. Тогда невозможно предотвратить переход страницы на следующую страницу. Но когда я удалю две части '[name = "username"]' и '[name = "vehicleregistration"]', остальные райдо и чекбокс будут работать. Я не знаю, что случилось. Но в итоге с вашей помощью моя задача была выполнена, т.к. в первых двух частях я использовал метод 'обязательно'. Большое спасибо за Вашу помощь

— 15.03.2019 10:53

Не за что, но я не совсем уверен, что вы имеете в виду, когда говорите, что это не работает. Я запустил его со своей стороны, и он предотвращает отправку формы, когда она не была заполнена. Есть ли причина, по которой вы не используете встроенную проверку формы?

— 16.03.2019 08:01

Вот как это происходит: когда я ничего не заполняю на странице и нажимаю «Отправить», появляется всплывающее окно с просьбой ввести мое имя. Затем страница прыгает. Вместо того, чтобы ждать, чтобы заполнить все пробелы, прежде чем прыгать. Но после того, как я удалю проверку двух текстовых свойств, остальная часть переключателя и флажка могут быть успешно проверены.

— 17.03.2019 00:06

15.03.2019 03:16