输入字段上的 Jquery addClass() 不起作用

Question

我有以下 CSS:

.error .form-inline{ border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }

和以下函数:

function myFunction() {
   if (year_value == "" && monthDay_value == "" && char_value == "" && rest_value == ""){ 
            alert("ERROR");
            $(':text').addClass("error");
            document.getElementById("AuthStatus").focus();
   }
}

我想要实现的是当用户在输入字段中输入错误数据时，突出显示用户输入错误信息的输入。但是，addClass() 似乎无法正常工作。我也更改了 css 以定位输入字段，但它也不起作用:

.error input[type="text"]{ border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }

我不确定我做错了什么。任何帮助将不胜感激。

这是表格:

            <div class="override_panel-body mobileAdjustments">
            <form class="form-inline" id="AuthStatus">
                <div class="background-color form-group">
                    <div class="padding1"><h3 class="fontWeight">Stay Informed</h3></div>
                        <p style="padding-left:6px !important;">
                            Lorem ipsum dolor sit amet, ei ubique disputando mea, sit in duis aliquip vivendo. Cum at justo facilisis. His ad nisl reprimique, eos no liber suscipit. Ex sed viderer phaedrum.
                        </p>
                        <div class="input-group panel-body" style="padding-left:6px !important;">
                            <input id="year" type="text" class="" placeholder="XXXX" aria-describedby="basic-addon1" />
                            <input id="monthDay" type="text" class="" placeholder="XXXX" aria-describedby="basic-addon2" />
                            <input id="char" type="text" class="" placeholder="XXXX" aria-describedby="basic-addon3" />
                            <input id="rest" type="text" class="" placeholder="XXXX" aria-describedby="basic-addon4" />
                            <div class="form-group">
                                <input id ="auth"  class="override_btn btn-info btn-block adjustments" type="submit" value="Submit" onclick="myFunction()" />
                            </div>
                            <div class="form-group">
                                <input id="clear" class="btn btn-light clear" onclick="ClearForm()" type="button" value="Clear" />
                            </div>
                        </div>
                        <p class="pddingBottom" style="padding-left:6px !important;">
                            Don't have an authorization number? Contact your doctor to get a copy.
                        </p>
                </div>
                <h3 class="fontWeight">FAQ</h3>
                <p>
                    Lorem ipsum dolor sit amet, ei ubique disputando mea, sit in duis aliquip vivendo. Cum at justo facilisis. His ad nisl reprimique, eos no liber suscipit. Ex sed viderer phaedrum.
                </p>
            </form>
        </div>

Answer 1

您可以使用 HTML5:

<input id="year" type="text" class="" placeholder="XXXX" required>

您可以通过另一种方式使用 Jquery 进行检查:

<input id="year" type="text" placeholder="XXXX">
<script>
$('#year').on('blur',function(){
if($('#year').val()==''){ 
    $('#year').addClass('yourClassName');
}else{
    $('#year').removeClass('yourClassName');
});
</script>

如果您需要一个简单的验证功能，请使用 HTML5。还要记得在后端进行验证。

更新1

我刚刚用“onclick”事件检查了你的提交按钮。请使用 HTML 之外的事件，这将使它更有条理并具有更好的性能。

更新 2 和 3 更好的答案:

<script>
$(function(){
$('#AuthStatus').on('submit'){
    var errors = 0;
    $("#AuthStatus :input").map(function(){
         if( !$(this).val() ) {
              $(this).addClass('warning');
              errors++;
        } else if ($(this).val()) {
              $(this).removeClass('warning');
        }   
    });
    if(errors > 0){
        $('#errorwarn').text("All fields are required");
        return false;
    }
}

});

未经测试。注意:删除提交按钮上的“onclick”。完整答案 here .