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

Question

Я пытаюсь заставить мою форму не перезагружаться, если мои пароли 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 (), все еще не работает ..

Answer 1

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

  $("#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>
        

Answer 2

Помимо проблем, указанных @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">

Answer 3

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

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

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

Вам также нужно передать объект события на прослушиватель кликов. В общем, должно быть:

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

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

  });