檢查多個輸入的空值不會工作

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>