JS Проверка формы пароля

Question

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

function check() {
  input1 = document.getElementById('old_pass')
  input2 = document.getElementById('new_pass')
  input3 = document.getElementById('new_passV')

  if (input2.value !== input1.value && input3.value === input2.value) {
    $('#pass_form').submit();
  } else if (input2.value === input1.value) {
    input2.setCustomValidity('Your new password cannot match your old password.');
  } else if (input3.value !== input2.value) {
    input3.setCustomValidity('New password must be matching.');
  } else {
    input2.setCustomValidity('');
    input3.setCustomValidity('');
    return true;
  }
};

<form id="pass_form" action="./php/pass-conn.php" method="POST">
  <br>
  Enter Current Password:
  <br>
  <input type="password" name="old_pass" id="old_pass" title="Password must contain at least eight characters" autofocus="autofocus">
  <br><br><br>
  Enter New Password:
  <br>
  <input type="password" name="new_pass" id="new_pass" pattern=".{8,}" title="Password must contain at least eight characters">
  <br><br>
  Confirm New Password:
  <br>
  <input type="password" name="new_passV" id="new_passV" pattern=".{8,}" title="Password must contain at least eight characters">
  <br><br>
  <a href="javascript:void(0);" id="showpass" onclick="showpass()">
    <u>Show/Hide</u>
  </a>
  <br><br>
  <input type="submit" onclick="check()">
</form>

Требуется, чтобы пользователь нажимал submit один раз, и если либо старый пароль идентичен новому, либо новый пароль не совпадать, бросить сообщение. В противном случае отправьте форму.

Answer 1

Во-первых, вам нужно использовать <input type="submit" onclick="return check()">, а во-вторых, вам нужно использовать return false; везде внутри условий в функции проверки, если это не нужно отправлять. И если все правильно, просто return true и тогда форма будет отправлена.

function check() {
	input1 = document.getElementById('old_pass');
	input2 = document.getElementById('new_pass');
	input3 = document.getElementById('new_passV');
	
	if (input2.value !== input1.value && input3.value === input2.value) {
		return true;
	}
	else if (input2.value === input1.value) {
		input2.setCustomValidity('Your new password cannot match your old password.');
		return false;
	}
	else if (input3.value !== input2.value) {
		input3.setCustomValidity('New password must be matching.');
		return false;
	}
}

<form id="pass_form" action="./php/pass-conn.php" method="POST"><br>
	Enter Current Password: <br><input type="password" name="old_pass" id="old_pass" title="Password must contain at least eight characters" autofocus="autofocus"><br><br><br>
	Enter New Password: <br><input type="password" name="new_pass" id="new_pass" pattern=".{8,}" title="Password must contain at least eight characters"><br><br>
	Confirm New Password: <br><input type="password" name="new_passV" id="new_passV" pattern=".{8,}" title="Password must contain at least eight characters"><br><br>
	<a href="javascript:void(0);" id="showpass" onclick="showpass()"><u>Show/Hide</u></a><br><br>
	<input type="submit" onclick="return check()">
</form>

Answer 2

Это решение, которое, кажется, работает правильно.

function check(){
  input1 = document.getElementById('old_pass')
  input2 = document.getElementById('new_pass')
  input3 = document.getElementById('new_passV')
  input2.setCustomValidity('');
  input3.setCustomValidity('');
  if(input2.value !== input1.value && input3.value === input2.value){
    return true;
  }else if(input2.value === input1.value){
    input2.setCustomValidity('Your new password cannot match your old password.');
    return false;
  }else if(input3.value !== input2.value){
    input3.setCustomValidity('New password must be matching.');
    return false;
  }
};

<form id="pass_form" method="POST"><br>
  Enter Current Password: <br><input type="password" name="old_pass" id="old_pass" title="Password must contain at least eight characters" autofocus="autofocus"><br><br><br>
  Enter New Password: <br><input type="password" name="new_pass" id="new_pass" pattern=".{8,}" title="Password must contain at least eight characters"><br><br>
  Confirm New Password: <br><input type="password" name="new_passV" id="new_passV" pattern=".{8,}" title="Password must contain at least eight characters"><br><br>
    <input type="submit" onclick="check()">
</form>