檢查表單中的輸入是否爲空

我編寫了一個代碼來驗證客戶端上的表單。由於我現在綁定了所有錯誤消息on('input', function())，所以需要考慮的最後一種情況是用戶甚至沒有按要求輸入時將其留空。檢查表單中的輸入是否爲空

如果所有形式的投入都需要我可以用類似

$('#subButton').on('click', function(e) { 
    if (!$('#formName').val()) { 
     e.preventDefault(); 
     alert("Fill all the required fields"); 
});

但因爲在我的形式有需要的投入（與class="req"）和非必需的投入，我想知道，如果有一種方法在.req輸入上執行只有的檢查。喜歡的東西：

$('#subButton').on('click', function(e) { 
    if (!$('#formName.req').val()) { 
     e.preventDefault(); 
     alert("Fill all the required fields"); 
    } 
});

換句話說，我想執行相同的檢查，其中上最新的瀏覽器做，如果指定的HTML required選項，只是可以肯定的是，如果瀏覽器是一個並且不會「讀取」required選項，jQuery會阻止發送表單。

來源

2016-12-16 Brigo

有很好的jQuery的表單驗證插件。我會建議使用其中之一。讓您無需自己編寫大量代碼。 https://jqueryvalidation.org/ – Seb

使用'form'上的'submit'按鈕的'click'事件並不是一個好主意，而不是觸發'form'的'submit'事件通過點擊提交按鈕。 –

@Seb當然，我檢查了那個和其他有名的，但是花了我更多的時間試圖弄清楚如何將它們整合到我的頁面中（我認爲它們有一個可怕的_wiki_），而不是自己寫整個驗證。無論如何，我會再試一次，以便進行更復雜的驗證。謝謝你的提示！ – Brigo

只需使用.filter並檢查長度。另外，一個簡單的!檢查可能不好，如果有人輸入0怎麼辦？

var hasEmptyFields = $('#formName.req').filter(function() { 
    return this.value.replace(/^\s+/g, '').length; //returns true if empty 
    //Stole the above regex from: http://stackoverflow.com/questions/3937513/javascript-validation-for-empty-input-field 
}).length > 0 

if (hasEmptyFields) { 

}

來源

2016-12-16 16:54:58 tymeJV

你完全正確的進入'0'。我測試了它，但它不起作用（確定我犯了一些錯誤）;我沒有得到'.length> 0'應該做什麼，請問我能解釋一下，因爲我是Javascript/jQuery中的新手嗎？謝謝！ – Brigo

使用reduce

const submitAllowed = $('.req').toArray().reduce((result, item) => { 
    return result && (!!item.value || item.value === 0); 
}, true) 

if (!submitAllowed) { ... }

Here是一個簡單的演示：

<form action="dummy.asp" onSubmit="return handleSubmit()"> 
    <p> You can only submit if you enter a name </p> 
    <br /> 
    Enter name: <input class="req" type="text" name="fname"> 
    <input type="submit" value="Submit"> 
</form> 

<script> 
    function handleSubmit() { 
    const submitAllowed = $('.req').toArray().reduce((result, item) => { 
     return result && (!!item.value || item.value === 0); 
     }, true) 

    return submitAllowed; 
    } 
</script>

來源

2016-12-16 16:58:05 lustoykov

你的方式似乎很有趣，但我實際上無法使它工作。 '$（'。req'）.toArray（）'會把所有的** '放入數組中？而且我也沒有清楚地知道每個.req如何使用'reduce'執行「空檢查功能」。對不起，但我是一個新手在Javascript/jQuery – Brigo

我編輯了我的答案。你可以用jsfiddle玩一下，事情會更清晰，我希望。還請閱讀我已鏈接的簡化文檔，您將得到它我承諾 – lustoykov

但因爲在我的形式有需要的投入（與class="req"）和所需的非輸入，我想知道是否有方法僅執行檢查在.req輸入上

有一個HTML5表單布爾屬性required。

required作品上：

<input type="text" />
<input type="search" />
<input type="url" />
<input type="tel" />
<input type="email" />
<input type="password" />
<input type="date" />
<input type="number" />
<input type="checkbox" />
<input type="radio" />
<input type="file" />

實施例：

input { 
 
display: block; 
 
margin: 6px; 
 
}

<form action="http://www.stackoverflow.com/"> 
 
<input type="text" placeholder="This is required" required /> 
 
<input type="text" placeholder="This isn't required" /> 
 
<input type="text" placeholder="This is required" required /> 
 
<input type="text" placeholder="This isn't required" /> 
 
<input type="submit" value="Press Me Without Filling in any of the Fields"> 
 
</form>

奇怪的是，上面的StackOverflow Snippet似乎沒有工作。

這裏有一個的jsfiddle證明它應該做的事：

https://jsfiddle.net/a5tvaab8/

來源

2016-12-16 18:53:01 Rounin

_「換言之，如果指定了HTML必需選項，我希望執行最新瀏覽器所做的相同檢查，只需要確定，如果瀏覽器有點舊，並且沒有「讀取」所需的選項，那麼jQuery將阻止表單發送。「_ – Brigo

謝謝@brigo--這將教會我在結束之前停止閱讀.. 。 – Rounin

檢查表單中的輸入是否爲空

回答

相關問題