javascript - querySelectorAll ('input:not([type="隐藏"]) :not([value =""])') keeps returning elements although the inputs are empty

Question

我正在尝试从表单中获取所有空输入 (value="")。

var inputsEmpty = loginForm.querySelectorAll('input:not([type="hidden"]):not([value=""])');

不断返回元素

0: input#companyName.form-control

1: input#userName.form-control

2: input#password.form-control

尽管它们不为空(在控制台中单击它们会显示value:''。

我尝试使用 jQuery，认为它可能与查询选择器有关

var inputsEmpty = $('input:not([type="hidden"]):not([value=""]):not([id="email"])');

我得到了相同的结果。

 <form class="form-horizontal form-material" id="loginform" action="/login/user_login" method="POST" novalidate>

    <h3 class="text-center m-b-20">Sign In</h3>

    <div class="form-group ">
        <div class="col-xs-12">
            <input class="form-control" type="text" name='company_name' id="companyName"  placeholder="Company Name" required="1" minlength="6" maxlength="30"/> 
        </div>
    </div>

    <div class="form-group ">
        <div class="col-xs-12">
            <input class="form-control" type="text" name="user_name" id="userName" autocomplete="off" placeholder="User Name" placeholder="Username" required="1" minlength="6" maxlength="30"> 
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-12">
            <input class="form-control" type="password" name='password' id="password" placeholder="Password" required="1" minlength="6" maxlength="30"> 
        </div>
    </div> .......

JS:

const loginForm = document.querySelector('#loginform');
const submit    = loginForm.querySelector('#submitBtn');
// const $loginForm = $('#loginform');

bootstrapValidate(
    '#companyName',
    'min:6:Invalid company name|max:30:Invalid company name|required:This field is required'
);

bootstrapValidate(
    '#userName',
    'min:3:Invalid company name|max:30:Invalid company name|required:This field is required'
);

bootstrapValidate(
    '#password',
    'min:6:Password too short (6 min)|max:30:Password too long (30 max)|required:This field is required'
);

function toSubmit() {

    var notValid    = loginForm.querySelector('.is-invalid');
    // var inputsEmpty = loginForm.querySelector('input:not([value=""])');
    // var inputsEmpty = loginForm.querySelector('input:not([value]):not([value=""])');
    var inputsEmpty = loginForm.querySelectorAll('input:not([type="hidden"]):not([value=""])');
    // var inputsEmpty = loginForm.querySelector('input[value=""]:not([type="hidden"])');
    // var inputsEmpty = $('input:not([type="hidden"]):not([value=""]):not([id="email"])');

    console.log(notValid);
    console.log(inputsEmpty);

    if (notValid || inputsEmpty)
        return false;
    else 
        loginForm.submit();
}

submit.onclick = toSubmit;

如何仅列出空输入

Answer 1

因为 value 是一个属性，所以当您对其进行选择器时，只会选择初始值(也称为属性)，因为您更改了值，选择器将不再起作用。

因此另一个解决方案是直接在 Javascript 中检查值。

inputsEmpty 检查，简单地使用普通选择器，但这次使用 querySelectorAll，转换为简单数组，并使用 Array.some 查找是否有这些都是空白的。 值==""。

下面是一个工作片段，显示了这一点。

ps。要使用您的代码，只需将您的inputsEmpty 替换为这个即可。

document.addEventListener("input", () => {
  var inputsEmpty = 
    Array.from(document.
      querySelectorAll('input:not([type=hidden])'))
        .some(function (e) {
          return e.value == "";
        });   
  document.querySelector("#isEmpty").classList.
    toggle("hidden", !inputsEmpty);
});

.hidden {
   display: none;
}

<input type="hidden" value=""/>
<input type="text" value=""/>
<input type="text" value="hello"/>

<div id="isEmpty">Empty</div>