Блог

Сможет ли кто-нибудь взглянуть на мой код и посмотреть, чего мне здесь не хватает?

У меня многостраничная форма с довольно большим количеством входных данных, и я хотел бы, чтобы кнопки «следующая страница» и конечные кнопки «отправить» были отключены до тех пор, пока все поля не будут заполнены.

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

 function checkForm()
{
	var elements = document.forms[0].elements;

	var cansubmit= true;
	
	for(var i = 0; i < elements.length; i  )
	{
		if(elements[i].value.length == 0 || elements[i].value.length == "" || elements[i].value.length == null)
		{
			cansubmit = false;
		}
		document.getElementById("myButton").disabled = !cansubmit;	
	}
	
};  

 <form>
	<label for="firstName">First Name:</label> <input type="text" id="firstName" onkeyup="checkForm()" />
	
	<br />
	
	<label for="lastName">Last Name:</label> <input type="text" id="lastName" onkeyup="checkForm()" />
	
	<button type="button" id="myButton" disabled="disabled">Test me</button>
</form>  

Ваш elements массив включает ваш button , который не имеет значения. Это приведет к тому, что ваш цикл всегда будет оценивать cansubmit = false; .

Попробуйте это вместо этого: https://jsfiddle.net/e00sorLu/2 /

 function checkForm()
{
    var elements = document.forms[0].elements;

    var cansubmit= true;
    for(var i = 0; i < elements.length; i  )
    {
        if(elements[i].value.length == 0 amp;amp; elements[i].type != "button")
        {
            cansubmit = false;
        }

    }

    document.getElementById("myButton").disabled = !cansubmit;  
};
  

Ответ уже принят, но вот несколько других вещей, которые вы можете рассмотреть:

То, как вы это настроили сейчас, абсолютно для чего угодно, кроме пустой строки "" , которую вы устанавливаете button.disabled = false и включаете кнопку.

1. Вы проверяете value.length 3 раза, но на самом деле хотите проверить .value вместо этого. length Свойство является только числовым значением для количества единиц кода в строке — оно никогда не будет "" или null , поэтому единственное, что вы действительно проверяете, это самое первое условие для пустой строки длиной 0.

   Вы также не учитываете несколько пробелов в пустой строке, поэтому " " это было бы допустимо)… или специальными символами, чтобы это было допустимо: (function goodByeWorld(evil){//do the bad things})();

2. Вы запускаете checkForm() функцию для всех элементов формы (включая <button> ) после каждого нажатия клавиши. В этом нет необходимости.

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

   Вместо этого вы можете привязаться к onblur() и отправить значение текущего элемента в качестве аргумента, как только это поле потеряет фокус. например, измените на: function checkValue(value) {//validate the value} ) и либо onblur = checkValue(this) в HTML, либо предпочтительно в нестроевом обработчике событий, который находится в файле JS.

   Вы все равно можете сделать это onkeyup = checkValue(this) для проверки после каждого нажатия клавиши, но измените функцию, чтобы проверять только 1 элемент вместо проверки t.h.e.e.n.t.i.r.e.f.o.r.m. десятки раз.

   Такой подход позволит вам индивидуально отслеживать действительность каждого отдельного элемента формы (здесь много вариантов в зависимости от того, что означает «действительный» — хранить массив значений, объекты со значениями или флаги «допустимый / недопустимый» И т. Д., переключать метки полей для проверки this на разные типы информации). Вы также можете выполнить дополнительную проверку отдельных элементов (например, минимальная / максимальная длина имени, исключение специальных символов и т. Д.) И отображать сообщения о проверке ошибок в реальном времени рядом с каждым элементом формы.

3. Вы по умолчанию cansubmit = true используете значение, которое не имеет особого смысла, учитывая, что вы собираетесь делать с этим кодом. Использование !cansubmit только запутывает себя и других, читающих код. Для удобства чтения рассмотрите возможность инвертирования его disableSubmit , чтобы он синхронизировался с button.disabled состоянием, которое должно быть только true or false .

Или вы можете использовать jQuery.

     <script type="text/javascript">
        function checkForm() {
            var cansubmit = false;
            $('form input[type="text"]').each(function (index, element) {
                if (element.value == "") {
                    cansubmit = true;
                }
            });
            document.getElementById("myButton").disabled = cansubmit;
        }
    </script>