Как избежать перехода к следующему, если поля не заполнены?

Question

Простым и простым способом, как избежать перехода к следующему шагу, если поля пустые, чтобы одно и то же сообщение отображалось для всех полей, независимо от типа поля, среди которых input, textarea, select, radio, checkbox, показано ниже введите следующее сообщение «Это поле должно быть заполнено, чтобы продолжить».

Как только все поля заполнены, перейдите к следующему и т. д.

Это полный код: https://jsfiddle.net/sLw19vh2/

Answer 1

Для нацеливания на разные типы ввода лучше всего использовать уникальное общее имя класса, как здесь icon-mail .. И установить требуемое свойство, чтобы мы могли рассчитывать на проверку браузера и использовать его как селектор jQuery фильтруйте при необходимости.

Как задается вопросом, это минималистское изменение, предотвращающее пропуск шага формы, когда входные данные этого уровня пусты.

Еще один подход, над которым вы можете работать, это мгновенный проверка с использованием .on('change keyup...') для запуска функции, которая проверяет поля текущего уровня, изменяет их количество и меняет стиль отображения кнопки.

$(function () {
		$("body").on("keyup", "form", function(e){
			if (e.which == 13){
				if ($("#next-wizard").is(":visible") && $("fieldset.current-wizard").find("input, textarea").valid() ){
					e.preventDefault();
					nextSection();
					return false;
				}
			}
		});

            
		$("#next-wizard").on("click", function(e){
        var notEmpty=$('fieldset.current-wizard .icon-mail[required]').filter(function(){
            return $(this).val();
        }).length;
        var reqElms=$('fieldset.current-wizard .icon-mail[required]').length;
			//console.log(e.target);
            if(notEmpty==reqElms){
            $('.sms').empty();
            $('.errtxt').remove();
            $('fieldset.current-wizard .icon-mail[required]').filter(function() {
    return $(this).val();
}).addClass("success");
			      nextSection();
            } else{
            e.preventDefault();
            
$('fieldset.current-wizard .icon-mail[required]').filter(function() {
   if( $(this).val().length === 0 ) {
     $(this).removeClass('success').addClass("error");
     $(this).parent().append('<span class="errtxt">This fields must be completed to continue!</span>');
   }
});
                
            }
		});
		$("form").on("submit", function(e){
			if ($("#next-wizard").is(":visible") || $("fieldset.current-wizard").index() < 3){
				e.preventDefault();
			}
		});
		function goToSection(i){
			$("fieldset:gt("+i+")").removeClass("current-wizard").addClass("next-wizard");
			$("fieldset:lt("+i+")").removeClass("current-wizard");
			$("li").eq(i).addClass("current-wizard").siblings().removeClass("current-wizard");
			setTimeout(function(){
				$("fieldset").eq(i).removeClass("next-wizard").addClass("current-wizard active-wizard");
				if ($("fieldset.current-wizard").index() == 3){
					$("#next-wizard").hide();
					$(".indicate").show();
				} else {
					$("#next-wizard").show();
					$(".indicate").hide();
				}
			}, 80);
		}
		function nextSection(){
			var i = $("fieldset.current-wizard").index();
			if (i < 3){
				$("li").eq(i+1).addClass("active-wizard");
				goToSection(i+1);
			}
		}
 
		$("li").on("click", function(e){
			var i = $(this).index();
			if ($(this).hasClass("active-wizard")){
				goToSection(i);
			} else {
				alert("Please complete previous sections first.");
			}
		});
	});

.error{
border:2px solid red !important;
}
.success{
border:2px solid green !important;
}
.wizard-form {
	width: 600px;
	height: auto;
	padding: 20px;
	background: #fff;
	margin: 80px auto;
	position: relative;
	min-height: 300px;
}
ul#section-tabs {
	font-size: 0.8em;
	height: 50px;
	position: relative;
	margin-top: -50px;
	margin-bottom: 50px;
	padding: 0;
	font-weight: bold;
	list-style: none;
	text-transform: uppercase;
}
#section-tabs li {
	color: #a7a7a7;
	cursor: not-allowed;
	border-left: 1px solid #aaa;
	text-decoration: none;
	padding: 0 6px;
	float: left;
	width: 25%;
	box-sizing: border-box;
	text-align: center;
	font-weight: bold;
	line-height: 30px;
	background: #ddd;
	position: relative;
}
#section-tabs li span {
	color: #bababa;
}
#section-tabs li.active-wizard {
	color: #444;
	cursor: pointer;
}
#section-tabs li:after {
	content: "";
	display: block;
	margin-left: 0;
	position: absolute;
	left: 0;
	top: 0;
}
#section-tabs li.current-wizard {
	opacity: 1;
	background: #fff;
	z-index: 999;
	border-left: none;
}
#section-tabs li.current-wizard:after {
	border: 15px solid transparent;
	border-left: 15px solid #2cbab2;
}
.error {
	color: #bf2424;
	display: block;
}
input.error,
textarea.error {
	border-color: #bf2424;
}
input.error:focus,
textarea.error:focus {
	border-color: #bf2424;
}
label.error {
	margin-bottom: 20px;
}
input.valid {
	color: green;
}
label.valid {
	position: absolute;
	right: 20px;
}
input + .valid,
textarea + .valid {
	display: none;
}
.valid + .valid {
	display: inline;
	position: absolute;
	right: 10px;
	margin-top: -36px;
	color: green;
}
.btn-wizard {
	border: none;
	padding: 8px;
	background: #2cbab2;
	cursor: pointer;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	color: #fff;
	position: absolute;
	bottom: 20px;
	right: 20px;
	font-family: 'Merriweather Sans', sans-serif;
}
.btn-wizard:hover {
	background: #26a19a;
}


div#fieldsets {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;
}
fieldset {
	border: none;
	position: absolute;
	left: -640px;
	width: 600px;
	padding: 10px 0;
	transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	opacity: 0;
}
fieldset.current-wizard {
	left: 20px;
	opacity: 1;
}
fieldset.next-wizard {
	left: 640px;
}
.indicate {
	display: none;
	border: none;
}

#next-wizard{
/*display:none;*/
}
.field {
	position: relative;
	display: inline-block;
	float: left;
	min-height: 75px;
}
.field input[type="email"], .field input[type="password"], .field input[type="text"], .form-defaul input[type="email"], .form-defaul input[type="password"], .form-defaul input[type="text"], .form-defaul select, .field select {
	padding: 25px 10px 10px;
	width: 100%;
	background-color: transparent;
	outline: 0;
	border: 1px solid #e0e0e0;
	color: #888;
	height: 55px;
	margin-bottom: 15px;
}

.field label, .form-defaul label {
	position: absolute;
	top: 8px;
	left: 10px;
	font-size: 12px;
	color: #888;
}
.field label.required:after, .form-defaul label.required:after {
	content: "*";
	color: tomato;
	margin-left: 5px;
}
/*option:disabled { color: red; }*/
.field-block  {
	width: 100%;
}
.field-half {
	width: 50%;
	padding-right: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wizard-form">
<div class="sms"></div>
											<form>
												<ul id="section-tabs">
													<li class="current-wizard active-wizard"><span>1.</span> Creds</li>
													<li><span>2.</span> Deets</li>
													<li><span>3.</span> Settings</li>
													<li><span>4.</span> Last Words</li>
												</ul>
												<div id="fieldsets">
													<fieldset class="current-wizard">
														<div class="form-group">
															<div class="field field-block">
																<input class="icon-mail" type="text" name="first_name" required>
																<label class="required">Nombre</label>
															</div>
															<div class="field field-block">
																<input class="icon-mail" type="email" name="email" required>
																<label class="required">Email</label>
															</div>
														</div>
													</fieldset>
													<fieldset class="next-wizard"></fieldset>
													<fieldset class="next-wizard"></fieldset>
													<fieldset class="next-wizard"></fieldset>

													<a class="btn-wizard" id="next-wizard">Next Section ▷</a>
													<input type="submit" class="indicate btn-wizard">
												</div>
											</form>
										</div>