Правильное использование .replaceWith () для создания валидатора пароля

Question

Я пытаюсь создать простую форму, которая проверит, что первый пароль и второй пароль, введенные пользователем, действительно совпадают. И если это так, я хотел бы показать изображение справа от ввода пароля, который подтверждает это.

У меня работает большинство аспектов кода. Тем не менее, я не могу заставить replaceWith () работать правильно. Код ниже покажет правильное изображение, если пользователь вводит первый пароль, вводит второй пароль, и оба одинаковы. Однако, если пользователь редактирует первый или второй пароль, вызывая несоответствие, replaceWith () не меняет изображение, чтобы сигнализировать об этом.

Любое понимание того, что я пропускаю или неправильно использую, было бы замечательно.

спасибо!

Вот HTML:

            echo '<form id="collect" action="add_new_user.php" method="POST" >';
                echo '<table class="sign_up">';

                    // ask to create login
                    echo '<tr><td><h2 class="nl">Login email</h2></td><td><input type="text" name="login_email" id="login_email" class="log" /></td><td><p id="email_status"></p><td></tr>';

                    // ask to create password
                    echo '<tr><td><h2 class="nl">Enter password</h2></td><td><input type="password" name="pass_one" id="pass_one" class="log" /></td></tr>';

                    // ask to confirm password 
                    echo '<tr><td><h2 class="nl">Confirm password</h2></td><td><input type="password" name="pass_confirm" id="pass_confirm" class="log" /></td><td id="pass_status"></td></tr>';

                    echo '<tr><td><input id="register" type="submit" value="Finish registration!" class="begin_mod_button" /></td></tr>';
                echo '</table>';
            echo '</form>';

Вот jQuery:

    $('#pass_confirm').focusout(function(login){
        var confirm = $(this).val();
        var pass = $('#pass_one').val();
        if(confirm == pass){
            $('#pass_status').replaceWith('<img src="images/greendot.png" />');
        }
        else{
            $('#pass_status').replaceWith('<img src="images/reddot.png" />');
        }
    });

Answer 1

Похоже, что вы удаляете td.

Попробуйте что-то вроде этого вместо

.replaceWith('<td><img src="images/greendot.png" /></td>');

Кроме того, вы вызываете функцию, когда второй input теряет фокус.Таким образом, любое изменение первого не будет зарегистрировано.

Одна быстрая вещь, которую вы можете сделать ( не проверено ), это проверить состояние, когда либо input теряет фокус,Что-то вроде

$('#pass_confirm, #pass_one').focusout(function(login){

Конечно, это будет означать, что красная точка будет отображаться даже до того, как будет введен любой текст подтверждения пароля.Но он снова выстрелит, когда это будет сделано.И он должен сработать снова, если пользователь попытается изменить первое поле.

Answer 2

В настоящее время есть несколько проблем с вашим кодом.

1. Как указал Джейсон, вы заменяете исходный <td id="pass_status"></td> содержимым вашего заявления replaceWith.
2. Другая проблема заключается в том, что вы обнаруживаете, только когда ввод пароля для подтверждения теряет фокус. Если они изменяют значение первого поля пароля, это событие не срабатывает, и ваша функция не запускается.
3. Для того, что вы делаете, имеет смысл использовать событие blur, а не focusout. Последний будет определять, когда какие-либо родительские элементы теряют фокус, и хотя это не обязательно происходит в вашем сценарии, все же лучше избегать ненужных сложностей.

Вот пересмотренный JS, чтобы заставить его работать:

$('#pass_one').blur(function(){
  $('#pass_confirm').trigger('blur').unbind('blur.confirmation').bind('blur.confirmation', function() {
    $('#pass_status').html($(this).val() === $('#pass_one').val() ? '<img src="images/greendot.png" />' : '<img src="images/reddot.png" />');
  });
});

Наряду с проверкой подтверждения, когда любое из значений размыто, оно фактически не дает пользователю ошибки, пока он не введет второй пароль.

Причина, по которой я использую .html() вместо .replaceWith(), заключается в том, что он заменяет внутренние элементы элемента, на который я ссылаюсь (#pass_status), а не сам элемент.

Области, в которых вы все еще можете улучшить мой код (если вам хочется немного озадачить свой мозг):

1. Избавляемся от привязки при каждом размытии #pass_one
2. Поиск способа заставить это работать, если пользователь сначала вводит пароль подтверждения, а затем первый пароль

Answer 3

Не могли бы вы сделать .append() вместо replaceWith()?Затем вы просто добавляете изображение после td.$('#pass_status').append('<img src="images/greendot.png" />');

Answer 4

Срабатывает только тогда, когда окно подтверждения теряет фокус. Если они изменяют значение #pass_one и оно теряет фокус, это больше не срабатывает.