检查一个输入是否为空（验证表单）

Question

我有一个 jQuery 代码，如果有任何空输入，它应该在我的表单中查看。如果所有输入都是空的，我的代码可以工作，但是当我输入一个输入值时，它就不再工作并且它通过了。请问你能帮帮我吗？谢谢！

jQuery(document).ready(function($) {
$('#next').click(function() {//My next button
   $('#age, #weight, #target_weight, #size').each(function() {//All field from my form
      if ($(this).val().trim().length == '') {//If all fields are empty -> do...
        $("html, body").animate({scrollTop: $('.progressbar-header').offset().top-100}, 250);
        /*Here I want to show the error field on every empty element*/
    $(this).closest('.questions').find('.error').css("visibility","visible");
        $(this).css('border-color', "#ff0000"); 
				
  	} else {
      alert("All fields are filled!");
    
    //This will show the next hidden div and hide the last one
    $('.active').removeClass('active').fadeIn().hide()
        .next().show().addClass('active');
    

    return false;
    }
  });
});
});

<div class="field personal-informations-icon">
                        <div class="questions-fcm-3 styled-radio">
                            <span class="title">age</span>
                            <div class="questions">
                                <input style="border-color: rgb(255, 0, 0);" id="age" class="personal-informations" pattern="[0-9]" name="age" placeholder="in Jahren" value="" min="1" aria-required="true" type="number">
                              	<div style="visibility: visible;" class="error age_error">This field is required!</div>
                            </div>
                        </div>
                        <div class="questions-fcm-3 styled-radio">
                            <span class="title">weight</span>
                            <div class="questions">
                                <input style="border-color: rgb(255, 0, 0);" id="weight" class="personal-informations" pattern="[0-9]" name="weight" placeholder="in KG" value="" min="1" aria-required="true" type="number">
                              	<div style="visibility: visible;" class="error weight_error">This field is required!</div>
                            </div>
                        </div>
                        <div class="questions-fcm-3 styled-radio">
                            <span class="title">target weight</span>
                            <div class="questions">
                                <input id="target_weight" class="personal-informations" pattern="[0-9]*" name="aim-weight" placeholder="in KG" value="" min="1" aria-required="true" type="number">
                              	<div class="error target_weight_error">This field is required!</div>
                            </div>
                        </div>
												<div class="questions-fcm-3 styled-radio">
                            <span class="title">Body Size</span>
                            <div class="questions">
                                <input id="size" class="personal-informations" pattern="[0-9]*" name="size" placeholder="in cm" value="" min="1" aria-required="true" type="number">
                              	<div class="error size_error">This field is required!</div>
                            </div>
                        </div>
                    </div>

Answer 1

您的代码中有几个错误，但主要问题在这里：

 if ($(this).val().trim().length == '')

Length 返回一个数字，您正在尝试将其与字符串进行比较。 我怀疑你的意思是：

if ($(this).val().trim() === '')

或者

if ($(this).val().trim().length === 0)

我从您的代码中删除了无关的元素以获取MVCE

这是您的 MVCE 的工作演示：JS Fiddle Demo

JQuery

$('#next').click(function() { //My next button
  var isValid = true;
  $('.personal-informations').each(function(i, obj) { //All field from my form
    if ($(this).val().trim() === '') { //If this field is empty -> do...
      /*Here I want to show the error field on every empty element*/
      $(this).css("display", "block");
      $(this).css('border-color', "#ff0000");
      isValid = false;
      console.log(isValid);
    }
  });
  if (isValid) {
    alert("All fields are filled!");
  }
});

HTML

<div class="field personal-informations-icon">
  <div class="questions-fcm-3 styled-radio">
    <span class="title">age</span>
    <div class="questions">
      <input id="age" class="personal-informations" pattern="[0-9]" name="age" placeholder="in Jahren" value="" min="1" aria-required="true" type="number">
      <div class="error age_error">This field is required!</div>
    </div>
  </div>
  <div class="questions-fcm-3 styled-radio">
    <span class="title">weight</span>
    <div class="questions">
      <input id="weight" class="personal-informations" pattern="[0-9]" name="weight" placeholder="in KG" value="" min="1" aria-required="true" type="number">
      <div class="error weight_error">This field is required!</div>
    </div>
  </div>
  <div class="questions-fcm-3 styled-radio">
    <span class="title">target weight</span>
    <div class="questions">
      <input id="target_weight" class="personal-informations" pattern="[0-9]*" name="aim-weight" placeholder="in KG" value="" min="1" aria-required="true" type="number">
      <div class="error target_weight_error">This field is required!</div>
    </div>
  </div>
  <div class="questions-fcm-3 styled-radio">
    <span class="title">Body Size</span>
    <div class="questions">
      <input id="size" class="personal-informations" pattern="[0-9]*" name="size" placeholder="in cm" value="" min="1" aria-required="true" type="number">
      <div class="error size_error">This field is required!</div>
    </div>
  </div>
</div>

<input type="button" id="next" value="Next">

CSS

.error {
  display: none;
}

---

关于您的代码的其他 cmets：

• 您有一个分配给您的输入的类。你应该使用那个类 在您的 JQuery 中绑定您的事件，而不是每个输入的 id。
• 您似乎没有意识到每个循环都是对 输入。在每个括号内，您只检查一个 特定的输入。最简单的方法是将该输入称为 $(this)。另外，您需要跟踪您是否有空 字段。我已经使用名为isValid 的布尔值完成了这项工作。那 boolean 在遇到空字段时设置为 false，然后 您可以在显示警报之前检查布尔值。
• 如果您只需要字段中的数字，您应该让用户知道。 要么将标签放在一边，将无效消息更改为状态 只允许数字，更改输入，以便除 当我输入一个数字时，它会立即被删除，或者......什么。 用户会想知道您为什么要删除他们输入的“11 lbs”并声明需要输入。
• console.log() 是你的朋友。使用它来调试您自己的代码。