Question

我尝试使用下面的代码段将border-bottom应用于点击事件为空的所有输入

var formElements = [];
    $("form :input").each(function(){
        formElements.push($(this));
    });

    if (formElements[1][0].value == '') {
        $("#username").css('border-bottom', '2px solid red').focus();
        return false;
    }
    if (formElements[0][0].value == '') {
        $("#id").css('border-bottom', '2px solid red');
        return false;
    }

jQuery只将CSS应用于最后一个元素，如何在不使用多个语句的情况下将CSS应用于所有div。

Answer 1

你的方式似乎很复杂。似乎最简单的解决方案是循环输入，检查值和添加类。

＆＃13;

var inputs = $("form :input").removeClass("error")
inputs.filter( (i,e) => !e.value.length ).addClass("error");
//inputs.filter( function (i,e) { return !e.value.length; } ).addClass("error");

＆＃13;

.error {
  border-bottom: 2px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input value="aaa" />
  <input value="" />
  <input value="" />
  <select>
    <option value="">pick</option>
    <option value="x">test</option>
  </select>
  <select>
    <option value="">pick</option>
    <option value="x" selected>Test</option>
  </select>  
  
</form>

＆＃13;

现在你停止的原因是因为你的回报是假的。它将进入一个if并停止。

Answer 2

只需尝试这个

var hasFocus = false; 
$( "form :input" ).each( function(){
    var $this = $( this );
    if ( $this.val().length == 0 )
    {
       $this.css( 'border-bottom', '2px solid red' );
    }
    if ( !hasFocus )
    {
       $this.focus(); 
       hasFocus = true; //set to true so that next erroneous input doesn't get focussed
    }
});

将错误css应用于提交时的所有空输入

2 个答案: