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。并记得在后端验证。

<强> UPDATE1

我刚刚使用“onclick”事件检查了您的提交按钮。请使用HTML之外的事件，它会使其更有条理，性能更好。

UPDATE2和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。

Answer 2

CSS选择器（虽然实际上你不应该需要它）应该是

input[type="text"].error  { ... }`

（error类适用于input元素），

并且jQuery选择器应该是

$('input[type=text]').addClass("error");

Jquery addClass（）在输入字段上不起作用

2 个答案: