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代码中删除了一些内容，因为在功能方面我不清楚。请随意将它们添加到应有的位置。

PS2 ：在我的小提琴中，我还将.submit课程从div更改为.submit-div，并将.submit课程添加到您的按钮。如果您希望以原始方式使用它，请相应地改回我提供的代码！

Answer 2

使用数组并存储DOM对象。单击提交按钮，循环遍历数组，检查它的值并应用css

$(document).ready(function() {
        $(".submit").click(function() {
            // An array to store DOM object
            var inpElem = [$(".firstname"), $(".gender")]
            // Iterate through it and check it's value 
            inpElem.forEach(function(item) {
                console.log(item.val)
                if (item.val() == '') {
                    item.css('border', '3px solid red');
                } else {
                    item.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');
            }
        });
    });

jsfiddle

Jquery错误陷阱逻辑

2 个答案: