Question

我编写了一个代码来验证客户端的表单。由于我将所有错误消息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选项，最新的浏览器会做什么，只是为了确保，如果浏览器有点旧并且没有＆＃39; t＆＃34;阅读＆＃34; required选项，jQuery阻止发送表单。

Answer 1

只需使用.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) {

}

Answer 2

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

Answer 3

但是因为在我的表单中有必要的输入（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" />

示例：

＆＃13;
＆＃13;
input { display: block; margin: 6px; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

特别是，上面的 StackOverflow代码段似乎无法正常工作。

这是 JSFiddle 来展示它应该做的事情：

https://jsfiddle.net/a5tvaab8/

检查表中的类输入是否为空

3 个答案: