检查多个输入空值不起作用

Question

我正在尝试使用jquery创建一个调查系统。我需要检测是否有任何输入值为空，然后获取错误功能。我做到了，但它只工作了一次。如何多次使用我的代码？

我创建了这个

＆＃13;

＆＃13;

$(document).ready(function(){
   $("body").on("click",".createnew", function(){
     if ($(".myinput").val().length !== 0) { 
      if($('.input').length !== 4){
        $(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
    } else {
       $(".createnew").remove();
    }
  } else {
     alert("You can not leave it blank input field!");
  }
   });
});

＆＃13;

html,
body {
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
.container {
   position:relative;
   width:100%;
   max-width:500px;
   margin:0px auto;
   overflow:hidden;
   margin-top:100px;
}
.inputs {
   position:relative;
   width:100%;
   overflow:hidden;
}
.input {
   position:relative;
   width:100%;
   overflow:hidden;
   margin-bottom:10px;
}
.myinput{
   width:100%;
   position:relative;
   height:35px;
   font-size:14px;
   padding:10px;
   outline:none;
}
*{
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
}

.createnew{
   position:relative;
   float:right;
   margin-top:10px;
   font-size:14px;
   font-weight:600;
   background-color:red;
   color:#ffffff;
   padding:8px;
}

.error {
   border:1px solid red !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="inputs">
      <div class="input" id="surway_poll">
         <input type="text" class="myinput" id="hoho" placeholder="Write something!">
      </div>
   </div>
   <div class="createnew">Create New Input</div>
</div>

＆＃13;

＆＃13;

＆＃13;

在此演示中，您可以看到创建一个新的输入按钮。因此，如果您单击它，则会收到警报。因为您没有从输入中写入任何文本。但是，如果您创建第二个输入而不是它是空的，则警报当时不起作用。我在这里想念的任何人都可以告诉我吗？

Answer 1

jQuery val方法仅获取第一个匹配元素的值，因此它不适用于第二个输入，因为它仍然返回第一个匹配元素的内容。

通过将:last添加到选择器来解决此问题：

$(document).ready(function(){
   $("body").on("click",".createnew", function(){
     if ($(".myinput:last").val().length !== 0) { 
       $(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
       if($('.input').length >= 4){
         $(".createnew").remove();
       }
     } else {
       alert("You can not leave an input field blank!");
     }
   });
});

html,
body {
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
.container {
   position:relative;
   width:100%;
   max-width:500px;
   margin:0px auto;
   overflow:hidden;
   margin-top:100px;
}
.inputs {
   position:relative;
   width:100%;
   overflow:hidden;
}
.input {
   position:relative;
   width:100%;
   overflow:hidden;
   margin-bottom:10px;
}
.myinput{
   width:100%;
   position:relative;
   height:35px;
   font-size:14px;
   padding:10px;
   outline:none;
}
*{
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
}

.createnew{
   position:relative;
   float:right;
   margin-top:10px;
   font-size:14px;
   font-weight:600;
   background-color:red;
   color:#ffffff;
   padding:8px;
}

.error {
   border:1px solid red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="inputs">
      <div class="input" id="surway_poll">
         <input type="text" class="myinput" id="hoho" placeholder="Write something!">
      </div>
   </div>
   <div class="createnew">Create New Input</div>
</div>

如果要检查所有输入是否为空白（以覆盖用户已清除非空白输入的情况），则可以使用此if代替：

     if ($('.myinput').get().every(s => $(s).val() !== '')) { 

注意：另请参阅上述代码段中的内容，只要您有四个输入，就会立即删除该按钮，而不是在您点击它时。

Answer 2

在原始代码中，您使用$(".myinput").val().length，它只获取第一个元素的值。您需要在添加新输入之前检查所有输入，而不仅仅是第一个或最后一个。这样，即使最后一个输入不为空并且上面的某些输入为空，您仍然需要显示警报。

$(document).ready(function(){
   $("body").on("click",".createnew", function(){
     var inputs = $(".myinput");
     var emptyFields = false;
     for (var i=0; i<inputs.length; i++){
     if ($(inputs[i]).val().length === 0)
            emptyFields = true;
     }
 if (emptyFields) {
     alert("You can not leave it blank input field!");
  } else {
  if(inputs.length !== 4){
        $('.inputs').append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
    } else {
       $(".createnew").remove();
    }
}

   });
});

html,
body {
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
.container {
   position:relative;
   width:100%;
   max-width:500px;
   margin:0px auto;
   overflow:hidden;
   margin-top:100px;
}
.inputs {
   position:relative;
   width:100%;
   overflow:hidden;
}
.input {
   position:relative;
   width:100%;
   overflow:hidden;
   margin-bottom:10px;
}
.myinput{
   width:100%;
   position:relative;
   height:35px;
   font-size:14px;
   padding:10px;
   outline:none;
}
*{
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
}

.createnew{
   position:relative;
   float:right;
   margin-top:10px;
   font-size:14px;
   font-weight:600;
   background-color:red;
   color:#ffffff;
   padding:8px;
}

.error {
   border:1px solid red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="inputs">
      <div class="input" id="surway_poll">
         <input type="text" class="myinput" id="hoho" placeholder="Write something!">
      </div>
   </div>
   <div class="createnew">Create New Input</div>
</div>

Answer 3

当你选择$('.myinput')它将返回一个数组时，如果你尝试用数组运行.val（）它只会对数组中的第一个元素执行它，你会想要使用{ {1}} JQuery函数

您可以执行以下操作：

.each

文档：https://api.jquery.com/each/