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

I wrote a code to validate a form on client-side. Since I binded all the error messages on('input', function()) now the last case to take in consideration is when the user didn't even hit a required input leaving it empty.

我编写了一个代码来验证客户端的表单。由于我在('input',function())上绑定了所有错误消息,现在要考虑的最后一种情况是当用户甚至没有点击所需的输入时将其留空。

If all the inputs in the form were required I could have used something like

如果表格中的所有输入都是必需的,我可以使用类似的东西

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

But since in my form there are required inputs (with class="req") and non required inputs, I would like to know if there's a method to perform the check only on the .req inputs. Something like:

但由于在我的表单中有所需的输入(使用class =“req”)和非必需的输入,我想知道是否有一种方法只对.req输入执行检查。就像是:

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

In other words I would like to perform the identical check which the up-to-date browsers do if the HTML required option is specified, just to be sure that, if the browser is a bit old and doesn't "read" the required option, jQuery prevents the form to be sent.

换句话说,我想执行相同的检查,如果指定了HTML required选项,最新的浏览器会做什么,只是为了确保,如果浏览器有点老并且没有“读取”所需的选项,jQuery阻止表单发送。

3 个解决方案

#1

Just use .filter and check the length. Also, a simple ! check probably isn't good, what if someone enters 0?

只需使用.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://*.com/questions/3937513/javascript-validation-for-empty-input-field
}).length > 0

if (hasEmptyFields) {

}

#2

Use reduce

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

if (!submitAllowed) { ... }

Here is a simple demo:

这是一个简单的演示:

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

#3

But since in my form there are required inputs (with class="req") and non required inputs, I would like to know if there's a method to perform the check only on the .req inputs

但由于在我的表单中有所需的输入(带有class =“req”)和非必需的输入,我想知道是否有一种方法只对.req输入执行检查

There is an HTML5 form boolean attribute required.

需要HTML5表单布尔属性。

required works on:

要求的工作:

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

Example:

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

<form action="http://www.*.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>

Peculiarly, the * Snippet above doesn't seem to be working.

特别是,上面的* Snippet似乎不起作用。

Here's a JSFiddle to demonstrate what it should be doing:

这是一个JSFiddle来演示它应该做什么:

https://jsfiddle.net/a5tvaab8/

#1