Javascript 多次显示Div，按钮仍处于禁用状态_Javascript_Jquery_Html

Javascript 多次显示Div，按钮仍处于禁用状态

javascript jquery html

Javascript 多次显示Div，按钮仍处于禁用状态,javascript,jquery,html,Javascript,Jquery,Html,有两个输入字段，一个用于写入新密码，另一个用于确认在新密码字段中写入的密码，我试图使显示请在上面输入密码的div显示在确认密码文本框下方，并且当值不等于新密码字段的值时，提交按钮被禁用，但当其正确时，请删除错误div并启用提交按钮，但是它没有启用提交按钮，也没有删除错误div，它还多次显示错误div，请问我的错误是什么 ...... <label for="new-password" class="col-sm-4 col-form-label">New Password

有两个输入字段，一个用于写入新密码，另一个用于确认在新密码字段中写入的密码，我试图使显示<代码>请在上面输入密码的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");
        });
    });

。。。。。。
新密码
确认新密码
修改密码
$（文档）.ready（函数（）{
$（'.confirm'）。关于（'change'，函数（e）{
var test=$（'.new-p'）.val（）；
如果（（e.target.value==测试）和&e.target.value！=''）{
$（“.confirm”）.parent（）.next（“.error”）.remove（）；
$（“#editUser”）.removeAttr（“禁用”）；
}否则
警报（如目标值）；
$（“.confirm”）.parent（）之后（“请输入您在上面键入的密码”）；
$（“#editUser”）.attr（“禁用”、“禁用”）；
});
});

我认为您的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>


$（文档）.ready（函数（）{
$（'.confirm'）。关于（'change'，函数（e）{
var test=$（'.new-p'）.val（）；
如果（（e.target.value==测试）和&e.target.value！=''）{
调试器；
$（“.confirm”）.parent（）.next（“.error”）.remove（）；
$（“#editUser”）.removeAttr（“禁用”）；
}否则{//否则你就做这件事
警报（如目标值）；
$（“.confirm”）.parent（）之后（“请输入您在上面键入的密码”）；
$（“#editUser”）.attr（“禁用”、“禁用”）；
}
});
});
新密码
确认新密码
修改密码

我认为您的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>


$（文档）.ready（函数（）{
$（'.confirm'）。关于（'change'，函数（e）{
var test=$（'.new-p'）.val（）；
如果（（e.target.value==测试）和&e.target.value！=''）{
调试器；
$（“.confirm”）.parent（）.next（“.error”）.remove（）；
$（“#editUser”）.removeAttr（“禁用”）；
}否则{//否则你就做这件事
警报（如目标值）；
$（“.confirm”）.parent（）之后（“请输入您在上面键入的密码”）；
$（“#editUser”）.attr（“禁用”、“禁用”）；
}
});
});
新密码
确认新密码
修改密码

以下是一些提示，向您展示解决方案的路径：

尝试使用

输入

事件而不是

更改

将应用程序状态提取到一个单独的对象中，并使用该对象进行比较

使错误消息成为持久的DOM元素，该元素根据密码比较进行切换

$（文档）.ready（函数（）{
变量状态={
p1:“，
p2:“”
};
$（“#错误”）.hide（）；
$（“#新密码”）。在（'input'，输入_value.bind（null，“p1”）；
$（“#新密码确认”）。在（'input'，输入_value.bind（null，“p2”）；
函数输入值（值名称、事件）{
var new_value=event.target.value；
状态[值\名称]=新值；
比较_值（）；
}
函数比较_值（）{
如果（state.p1！==state.p2）{
$（“#错误”）.show（）；
$（“#editUser”）.attr（“禁用”、“禁用”）；
返回；
}
$（“#错误”）.hide（）；
$（“#editUser”）.removeAttr（“禁用”）；
}
});

新密码
确认新密码
修改密码
请输入您在上面键入的密码
以下是一些提示，向您展示解决方案的路径：
尝试使用输入
事件而不是更改
将应用程序状态提取到一个单独的对象中，并使用该对象进行比较
使错误消息成为持久的DOM元素，该元素根据密码比较进行切换

$（文档）.ready（函数（）{
变量状态={
p1:“，
p2:“”
};
$（“#错误”）.hide（）；
$（“#新密码”）。在（'input'，输入_value.bind（null，“p1”）；
$（“#新密码确认”）。在（'input'，输入_value.bind（null，“p2”）；
函数输入值（值名称、事件）{
var new_value=event.target.value；
状态[值\名称]=新值；
比较_值（）；
}
函数比较_值（）{
如果（state.p1！==state.p2）{
$（“#错误”）.show（）；
$（“#editUser”）.attr（“禁用”、“禁用”）；
返回；
}
$（“#错误”）.hide（）；
$（“#editUser”）.removeAttr（“禁用”）；
}
});

新密码
确认新密码
修改密码
请输入您在上面键入的密码
使用$（“#editUser”）.prop（“禁用”，false）
启用和$（“#editUser”）.prop（“禁用”，true）以禁用。这是一个布尔属性…它不起作用，我试过使用$（“#editUser”）.prop（“disabled”，false）
启用和$（“#edi