有2个输入字段，一个用于写入新密码，一个用于确认新密码字段中写入的密码，我试图使一个div显示请在上面输入密码显示在确认密码文本框下方，当该值不等于新密码字段的值时，提交按钮被禁用，但当它正确时，删除错误 div 并启用提交按钮，但它不会启用提交按钮并且它不会删除错误 div，它还会多次显示错误 div，请问我的错误是什么
......
<label for="new-password" class="col-sm-4 col-form-label">New Password</label>
<div class="col-sm-6">
<input id="new-password" type="password" class="form-control new-p" name="new-password" required>
</div>
<div class="form-group row">
<label for="new-password-confirm" class="col-sm-4 col-form-label">Confirm New Password</label>
<div class="col-sm-6">
<input id="new-password-confirm" type="password" class="form-control confirm" name="new-password_confirmation" required>
<div class='row' id="edit-profile-buttons">
<button type='submit' id="editUser" name="editUser">Change Password</button>
</div>
</div>
</div>
</form>
$(document).ready(function(){
$('.confirm').on('change', function (e) {
var test = $('.new-p').val();
if ((e.target.value === test) && e.target.value != '' ){
$(".confirm").parent().next(".error").remove();
$("#editUser").removeAttr("disabled");
}else
alert(e.target.value);
$(".confirm").parent().after("<div class='error' style='color:red;margin-bottom: 20px;'>Please enter the password you typed above</div>");
$("#editUser").attr("disabled", "disabled");
});
});
最佳答案
我认为你的 else 语句缺少括号:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.confirm').on('change', function (e) {
var test = $('.new-p').val();
if ((e.target.value === test) && e.target.value != '') {
debugger;
$(".confirm").parent().next(".error").remove();
$("#editUser").removeAttr("disabled");
} else { //else do this whole thing
alert(e.target.value);
$(".confirm").parent().after("<div class='error' style='color:red;margin-bottom: 20px;'>Please enter the password you typed above</div>");
$("#editUser").attr("disabled", "disabled");
}
});
});
</script>
</head>
<body>
<form>
<label for="new-password" class="col-sm-4 col-form-label">New Password</label>
<div class="col-sm-6">
<input id="new-password" type="password" class="form-control new-p" name="new-password" required>
</div>
<div class="form-group row">
<label for="new-password-confirm" class="col-sm-4 col-form-label">Confirm New Password</label>
<div class="col-sm-6">
<input id="new-password-confirm" type="password" class="form-control confirm"
name="new-password_confirmation" required>
<div class='row' id="edit-profile-buttons">
<button type='submit' id="editUser" name="editUser">Change Password</button>
</div>
</div>
</div>
</form>
</body>
</html>
关于javascript - Div 显示多次且按钮仍处于禁用状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51087883/