有2个输入字段,一个用于输入新密码,另一个用于确认在新密码字段中写入的密码,我试图使在确认密码文本框下方显示一个显示......
<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");
});
});
的div。当值不等于新密码字段的值时,提交按钮将被禁用,但正确时,请删除错误div并启用提交按钮,但不会启用提交按钮,也不会删除错误div,它还会多次显示错误div,请问我是什么错误
{{1}}
答案 0 :(得分:2)
我认为您的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>
答案 1 :(得分:1)
以下是一些提示,向您显示解决方案的路径:
input
事件代替change
$(document).ready(function() {
var state = {
p1: "",
p2: ""
};
$('#error').hide();
$('#new-password').on('input', enter_value.bind(null, "p1"));
$('#new-password-confirm').on('input', enter_value.bind(null, "p2"));
function enter_value(value_name, event) {
var new_value = event.target.value;
state[value_name] = new_value;
compare_values();
}
function compare_values() {
if (state.p1 !== state.p2) {
$('#error').show();
$("#editUser").attr("disabled", "disabled");
return;
}
$('#error').hide();
$("#editUser").removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id='error' style='color:red;margin-bottom: 20px;'>Please enter the password you typed above</div>
</div></form>