querySelectorAll ('input: not ([type = "hidden"]): not ([value = ""])') продолжает возвращать элементы, хотя входные данные пусты

Question

Я пытаюсь получить все пустые данные (value="") из моей формы.

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

Сохраняет возвратные элементы

0: введите # 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

Поскольку значение является атрибутом, когда вы делаете для него селектор, на нем будет выбрано только начальное значение (он же атрибут), потому что при изменении значения селектор больше не будет работать.

Итак, еще одно решение - проверить значение непосредственно в Javascript.

Проверка inputsEmpty просто использует обычный селектор, но на этот раз использует querySelectorAll, преобразует в простой массив и использует Array.some, чтобы определить, не являются ли какие-либо из них пустыми. value=="".

Ниже приведен рабочий фрагмент, показывающий это.

пс. чтобы работать с вашим кодом, просто замените значения inputEmpty этим.

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>