javascript - Jquery 错误陷阱逻辑

Question

$(document).ready(function() {
  $(".submit").click(function() {
    if($(".firstname").val()=='' && $(".gender").val()==0){
      $(".regform input.firstname, .regform select.gender").css('border','3px solid red');
    }else {
      $(".regform input.firstname, .regform select.gender").css('border','2px solid #78bdca');
    }
    if($(".firstname").val()!='') {
      $(".steps.step3, .steps.step4, .steps.step5").fadeIn(1000).css({
        display: "block"
      });	

      $(".submit").prop('value', 'Submit');
    }
  }); 
});

.steps {
  margin-bottom: 5px;
	text-align: center;
}

.regform select {
	width: 380px;
	margin: 0 auto;
	display: block;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	border: #78bdca 2px solid;
	font-family: 'quicksandregular';
	font-size: 16px;
	padding: 12px 0 12px 12px;
	color: #78bdca;
	background: #fff url(/images/assets/hcd-dropdown.png) 96% 50% no-repeat;
	background-size: 15px auto;
	-webkit-appearance: none;
	-moz-appearance: button;
	appearance: button;
	text-overflow: '';
}

.regform input {
	width: 380px;
	margin: 0 auto;
	display: block;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	border: #78bdca 2px solid;
	font-family: 'quicksandregular';
	font-size: 16px;
	padding: 12px 0 12px 12px;
	color: #78bdca;
}

.regform select[name=dobday], .regform select[name=dobmonth], .regform select[name=dobyear] {
  width: 124.5px;
	display: inline-block;
}

.steps.step3, .steps.step4, .steps.step5 {
	display: none;
}

.submit .myButton {
	-webkit-appearance: button;
	cursor: pointer;
	width: 380px;
	color: #fff;
	font-family: 'quicksandregular';
	font-size: 16px;
  height: 44px;
	outline: 0;
	border: none;
	background: rgba(120, 189, 202, .9);
	padding: 0;
}

我想寻求一些逻辑方面的帮助。我是 JS 新手

逻辑:

如果您单击提交按钮，如果这 2 个元素没有任何值，我将其置于红色边框(我已经做到了。)以强调错误。现在，当我输入其中一个元素的值时，我想为没有值的元素留下红色边框。

这是我的代码:

$(document).ready(function() {
	$(".submit").click(function() {
		if($(".firstname").val()=='' && $(".gender").val()==0){
			$(".regform input.firstname, .regform select.gender").css('border','3px solid red');
		}else {
			$(".regform input.firstname, .regform select.gender").css('border','2px solid #78bdca');
		}
		if($(".firstname").val()!='') {
		$(".steps.step3, .steps.step4, .steps.step5").fadeIn(1000).css({
			display: "block",
			visibility: "visible"
		});	

		$(".submit .myButton").prop('value', 'Submit');
		}
	}); 
});

感谢您的帮助!

Answer 1

你必须单独检查他们的输入:

$(document).ready(function() {
    $(".submit").click(function() {
        // Check for firstname input state
        if($(".firstname").val()==''){
            // Not filled, change to red
            $(".regform input.firstname").css('border','3px solid red');
        }
        else{
            // Filled, change to blue
            $(".regform input.firstname").css('border','2px solid #78bdca');
        }
        // Check for gender input state
        if($(".gender").val()==0){
            // Not filled, change to red
            $(".regform select.gender").css('border','3px solid red');
        }
        else{
            // Filled, change to blue
            $(".regform select.gender").css('border','2px solid #78bdca');
        }
    }); 
});

因此，每一项都会有自己的检查条件，如果填写正确，则会变成蓝色，否则会变成红色。此外，一个完整的例子在这个 JSFiddle 中。 .

P.S.:我从您的 Javascript/jQuery 代码中删除了一些部分，因为它们的功能我不清楚。随时将它们添加到它们应该在的位置。

P.S.2: 在我的 fiddle 中，我还将 .submit 类从 div 更改为 .submit-div 并将 .submit 类添加到您的按钮。如果您更愿意以原来的方式使用它，请根据我提供的代码相应地改回来!