Блог

Главная - Вопросы по программированию - Что не так с моим кодом Jquery? Пытаюсь не перезагружать форму, если пароли не совпадают

Что не так с моим кодом Jquery? Пытаюсь не перезагружать форму, если пароли не совпадают

#javascript #jquery #html #forms #flask

#javascript #jquery #HTML #формы #flask

Вопрос:

Я пытаюсь заставить мою форму не перезагружаться, если мои пароли 1 и 2 не совпадают, когда я нажимаю отправить. Что не так с моим кодом, прикрепляющим html и js.

 <label for="password">Lösenord: </label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Lösenord" required>
        <p>
        </p>
        <label for="password2">Upprepa Lösenord: </label>
        <input type="password" class="form-control" id="password2" name="password2" placeholder="Lösenord" required>
        <p>
        </p>
  
 $(document).ready( function() {

  $("#submit").click( function() {
    var password1 = $("#password");
    var password2 = $("#password2");
    alert(password2);
    if (password1 /= password2) {
      preventDefault();
    }

  });
});

ОБНОВЛЕНИЕ: Пробовал изменить на «!=» и passwor.val(), по-прежнему не работает..

Комментарии:

1. игнорируйте «функцию оповещения»

2. password1 /= password2 ? что вы пытаетесь сделать с разделением здесь ?

3. Я думаю, у вас опечатка, «password1 /= password2» должно быть, если password1 != password2

4. @CodeManiac Я почти уверен, что они пытаются использовать «not =» там. Я думаю, что Haskell использует этот оператор.

Ответ №1:

Помимо проблем, на которые указал @Joshua Robles,

Добавьте пустой value атрибут в свои поля ввода, например, так:

<input type="password" class="form-control" id="password" name="password" placeholder="Lösenord" value="" required>

Полный код и демо:

  $("#submit").click( function(event) {
    var password1 = $("#password").val();
    var password2 = $("#password2").val();

    if (password1 !== password2) {
      alert("Passwords don't match")
      event.preventDefault();
    }

  });  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="password">Lösenord: </label>
<input type="password" class="form-control" id="password" name="password" placeholder="Lösenord" value="" required>
<p></p>
<label for="password2">Upprepa Lösenord: </label>
<input type="password" class="form-control" id="password2" name="password2" placeholder="Lösenord" value="" required>
<p></p>
<input type="submit" id="submit">

Ответ №2:

Если я правильно помню, вы получаете только ссылку на элемент DOM. Чтобы получить значение, вам нужно использовать .val()

Вы также выполняете разделение вместо сравнения. Ваше сравнение операторов if должно быть:

if (password1.val() !== password2.val()) {

Вам также необходимо передать объект event в прослушиватель кликов. Итак, в целом, это должно быть:

 
  $("#submit").click( function(event) {
    var password1 = $("#password").val();
    var password2 = $("#password2").val();

    if (password1 !== password2) {
      event.preventDefault();
    }

  });

Комментарии:

1. Пробовал, увидел свою опечатку, все еще не работает. Должен ли я также изменить свои объявления var или они должны остаться прежними?

2. Да, не заметил. Есть ли открытая глобальная preventDefault функция в вашем коде? Возможно, вам потребуется иметь event параметр в вашей функции onClick и использовать preventDefault функцию из этого объекта. Я обновлю свой ответ

3. У меня нет функции onclick для кнопки отправки, она работает через мои маршруты. py и отправляет метод post. Я думаю, что Jquery доминирует в этом? Я новичок в jquery. Я думал, что preventDefault предотвращает метод post, который обычно выполняет submit.

4. Вы создаете прослушиватель событий нажатия на кнопку отправки. Я предлагаю вам ознакомиться с основами javascript и тем, как работает jquery, чтобы полностью понять, что вы пытаетесь сделать. Опять же, я не советую вам использовать jQuery, поскольку многие функции, которые они предоставляли, теперь уже доступны в современных браузерах. Я обновил свой ответ. Надеюсь, это поможет!

Ответ №3:

В вашем примере следует использовать часть привязки события click к preventDefault() , компаратору simple logic != , поскольку он не зависит от типа объекта, и, наконец, предотвратить истинную проверку, если поля пусты 

   $("#submit").click( function(event) {
    var password1 = $("#password").val().length>0 ? $("#password").val() : 'a';
    var password2 = $("#password2").val().length>0 ? $("#password2").val() : 'b';
     //prevent true if empty
    if (password1 != password2) {
      event.preventDefault();
    }
  });  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form id="form" action="">
<label for="password">Lösenord: </label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Lösenord" required>
        <p>
        </p>
        <label for="password2">Upprepa Lösenord: </label>
        <input type="password" class="form-control" id="password2" name="password2" placeholder="Lösenord" required>
        <p>
        <button id="submit">Ok</button>
        </p>
 </form>