检查多个输入的空值不会工作

Question

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

我创造了这个

$(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!"); 
 
    } 
 
    }); 
 
});

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 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>

如果要检查所有输入都是非空（覆盖在用户已经清除了非的情况下-blank输入），那么你可以使用这个if代替：

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

注：另见我如何在上面的代码片段中，只要您有四个输入，该按钮就会被删除，而不是稍后当您单击它时。

Answer 2

当您选择$('.myinput')它会返回一个数组，如果你尝试与阵列只会数组中的第一个元素做运行.VAL（），您将要使用的.each jQuery函数

你可以这样做：

function checkInputs(inputs) { 
    $("input").each(function() { 
    var element = $(this); 
    if (element.val() == "") { 
     return false 
    } 
    }); 
    return true 
} 

if (checkInputs($(".myinput"))) { 
     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!"); 
    } 

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

Answer 3

在您使用$(".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>