Как сделать проверку заполнения поля через скрипт?

Question

[NetmenCC]

Помогите не могу разобраться что не так сделал!

Написал скрипт

<script>
$('#form').submit(function() {
var faults = $('input').filter(function() {
  
    return $(this).data('required') && $(this).val() === "";})
	
    .css("border-color", "red");
    error.innerHTML = ('<span style="color:#e74c3c">Введите пароль</span>');
	
    if(faults.length) return false; 
});

</script>

PHP

<div class="passp-form-field__input">
<input type="password" id="passp-field-passwd" name="password" autocomplete="OFF" data-placeholder="Введите пароль" data-required="true"/></div>
<div id="error"></div>

Если пользователь не ввел пароль поле должно подчеркнуть красны цветом и ниже вылезет надпись "Введите пароль".
Все работает, подчеркивает и надпись появляется. НО если пользователь все таки вводит пароль, поле не подчеркивает а надпись вылезает все равно! что не так с кодом? помогите!!!

Comments

[Дмитрий]

Тут нет php
Лучше вместо всех тегов добавить один jquery

[NetmenCC]

Дмитрий, действительно) опечатался

[uncletobe]

Дмитрий, можно весь код, плз

[Дмитрий]

uncletobe, какой код?

[Дмитрий]

NetmenCC, https://toster.ru/tag/jquery/questions
Вот нужный тег

[uncletobe]

Дмитрий, сори, по нику промазал. я к автору хотел обратиться, глянуть, что там за еррор вообще переменная.

[NetmenCC]

uncletobe, Это в принципе и есть весь код для работы проверки

[NetmenCC]

uncletobe, вот переменная error

<div class="passp-form-field__input">
<input type="password" id="passp-field-passwd" name="password" autocomplete="OFF" data-placeholder="Введите пароль" data-required="true"/></div>
<div id="error"></div>

Answer 1

[Aricus]

Ошибка появляется, потому что её добавление идёт отдельной командой, а изменение css - часть предыдущей. Правильно будет примерно так:

$('#form').submit(function() {
    var faults = $('input').filter(function() {
        var thisReturn = $(this).data('required') && $(this).val() === "";
        if (thisReturn === true) {
            error.innerHTML = ('<span style="color:#e74c3c">Введите пароль</span>');
        }
        return thisReturn ;})
    .css("border-color", "red");
    
    if(faults.length) return false; 
});

Comments

[NetmenCC]

Да, действительно) так работает! спасибо

[Aricus]

Тогда отметьте ответ решением.