Как проверить input на заполненность?

Question

[Даниил Бакунин]

Передо мной стоит небольшая задача, которая завела меня в тупик:
1. Есть три поля ФИО, которые выдают ошибку, в случае незаполненности.
2. Если заполнить хотя бы одно поле - ошибка пропадает, но остальные поля могут быть пустыми.
3. Нужно, чтобы всегда была ошибка, при любом незаполненном поле.

Для решения задачи - создал три невидимых поля ФИО, которые заполняются параллельно с вводом данных в основные поля. Далее следует повесить обработчик на каждое невидимое поле, чтобы он выдавал ошибку, при не заполненном поле...Как это сделать - не знаю.

Код, который выводит ошибку (насколько я понимаю)

$(document).ready(function(){
				BX.addCustomEvent('onAjaxSuccess', function(){ // при обновлении через ajax выполнить функцию
					$('#ORDER_PROP_3').mask("[phone]");

				    // разбиение поля ФИО на 3 инпута
				    $('[name="ORDER_PROP_1"]').css('display', 'none');
				    $('.new_fio_input').focusout(function() {
				        $('[name="ORDER_PROP_1"]').val($('.new_fio_input[name="NAME"]').val() + ' ' + $('.new_fio_input[name="LASTNAME"]').val() + ' ' + $('.new_fio_input[name="MIDNAME"]').val());
				    });

				});
			});
// js error выводящий ошибку
		function submitForm(val)
		{
			if(val != 'Y')
				BX('confirmorder').value = 'N';

			var orderForm = BX('ORDER_FORM');

			BX.ajax.submitComponentForm(orderForm, 'order_form_content', true);
			BX.submit(orderForm);

// error
			setTimeout(function() {
				clearInterval(interval);
			}, 4000);

			return true;
		}
		function SetContact(profileId)
		{
			BX("profile_change").value = "Y";
			submitForm();

			setTimeout(function() {
				$('#ORDER_PROP_3').val('');
			}, 3000);

		}

Основные три input поля

if($arProperties["FIELD_NAME"] == 'ORDER_PROP_1'){
						?>
						<input class="new_fio_input" id="name" name="NAME" type="text" maxlength="250" placeholder="Фамилия">
						<input class="new_fio_input" id="surname" name="LASTNAME" type="text" maxlength="250" placeholder="Имя">
						<input class="new_fio_input" id="patronymic" name="MIDNAME" type="text" maxlength="250" placeholder="Отчество">
						<input type="text" maxlength="250" size="<?=$arProperties["SIZE1"]?>" value="<?=(stripos($arProperties["VALUE"], 'Без имени') === false ? $arProperties["VALUE"] : '')?>" name="<?=$arProperties["FIELD_NAME"]?>" id="<?=$arProperties["FIELD_NAME"]?>">
						<?
						}else{
						?>
						<input type="text" maxlength="250" size="<?=$arProperties["SIZE1"]?>" value="<?=(stripos($arProperties["VALUE"], 'Без имени') === false ? $arProperties["VALUE"] : '')?>" name="<?=$arProperties["FIELD_NAME"]?>" id="<?=$arProperties["FIELD_NAME"]?>">
						<?
						}

Спрятанные поля:

<input type="text" class="hidden__name">
<input type="text" class="hidden__surname">
<input type="text" class="hidden__patronymic">

Comments

[AgentSmith72]

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

<? if(true): ?>
    <input>
<? else: ?>
    <input>
<? endif; ?>

[Даниил Бакунин]

AgentSmith72, Хорошо подмечено, перепишу для лучшей читаемости, спасибо!)

[AgentSmith72]

Даниил Бакунин, со скрытыми полями это слишком мудрёно.

<input type="text" min="<?=$option['min'];?>" 
onkeypress='return event.charCode >= 48 && event.charCode <= 57' 
onblur="correct(this)">

К примеру в этом коде:

• проверяется, что минимальная длина соответствует настройкам
  
• onkeypress как пример использования js прямо в input
  

[Даниил Бакунин]

AgentSmith72, Очень Вам признателен! Это намного лучший вариант чем тот, что я придумал))

[AgentSmith72]

Даниил Бакунин, удачи вам! Изучите хорошенько атрибуты input, и js для этого не понадобится.

[Даниил Бакунин]

AgentSmith72, Обязательно! :)

[ThunderCat]

AgentSmith72,

Можно использовать тернарные операторы,

А где там у вас тернарные операторы?

[Sergei Nazarenko]

AgentSmith72,

чтобы читаемость кода стала лучше.

Прекратите использовать else в ваших программах

[AgentSmith72]

Sergei Nazarenko, согласен с автором статьи, это приходит с опытом. Для («guard clause») использую throw_if. Здесь же речь идёт о директивах в шаблоне, а не о программах.

Answer 1

[JuniorHabr]

Как вариант можно добавить атрибут required все нужным input.