javascript - 使用 Javascript 在 Bootstrap 中启用基于类名的提交按钮

Question

更新

我创建了一个解决此问题的方法。我只是将 hide 添加到密码字段，然后让脚本在电子邮件有效后显示它们。然后我做到了，一旦密码有效，“提交”按钮就会被启用。我将更新下面的代码以反射(reflect)此解决方案

<小时/> <小时/>

原始问题

我正在使用 Bootstrap 框架创建一个表单。我有两个脚本(一个用于检查电子邮件，另一个用于检查密码。)

查看此脚本的实际操作: http://www.green-panda.com/adminarea/temp.php然后单击添加新用户。注意:一旦找到解决方案并将其发布到此处，我将删除此页面。

电子邮件脚本

                    <script>
                    function validateForm()
                    {
                    var x=document.forms["addUser"]["email"].value;
                    var atpos=x.indexOf("@");
                    var dotpos=x.lastIndexOf(".");
                    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
                      {
                      document.getElementById("emaildiv").className +=" error";
                      document.getElementById("passdiv1").className =" control-group hide";
                        document.getElementById("passdiv2").className =" control-group hide";
                      document.getElementById("emailhelp").innerHTML =" Must be a valid email address";
                      }
                     else{
                        document.getElementById("emaildiv").className =" control-group success";
                        document.getElementById("passdiv1").className =" control-group";
                        document.getElementById("passdiv2").className =" control-group";
                        document.getElementById("emailhelp").innerHTML =" Looks Good!";
                     }
                    }
                </script>

密码脚本

                <script> 
                    function validatePwd() {
                        var invalid = " "; // Invalid character is a space
                        var minLength = 8; // Minimum length
                        var maxLength = 16; //Maximum Length
                        var pw1 = document.addUser.password.value;
                        var pw2 = document.addUser.password2.value;
                        // check for a value in both fields.
                        if (pw1 == '' || pw2 == '') 
                        {
                            document.getElementById("passdiv1").className +=" error";
                            document.getElementById("passdiv2").className +=" error";
                            document.getElementById("passhelp").innerHTML =" Type your password twice.";
                            return false;
                        }
                        // check for minimum length
                        if (document.addUser.password.value.length < minLength) 
                        {
                            document.getElementById("passdiv1").className +=" error";
                            document.getElementById("passdiv2").className +=" error";
                            document.getElementById("passhelp").innerHTML ="Your password must be 8-16 characters long.";
                            return false;
                        }
                        // check for maximum length
                        if (document.addUser.password.value.length > maxLength) 
                        {
                            document.getElementById("passdiv1").className +=" error";
                            document.getElementById("passdiv2").className +=" error";
                            document.getElementById("passhelp").innerHTML ="Your password must be 8-16 characters long.";
                            return false;
                        }
                        // check for spaces
                        if (document.addUser.password.value.indexOf(invalid) > -1) 
                        {
                            document.getElementById("passdiv1").className +=" error";
                            document.getElementById("passdiv2").className +=" error";
                            document.getElementById("passhelp").innerHTML ="Sorry, spaces are not allowed.";
                            return false;
                        }
                        else {
                                if (pw1 != pw2) 
                                {
                                    document.getElementById("passdiv1").className +=" error";
                                    document.getElementById("passdiv2").className +=" error";
                                    document.getElementById("passhelp").innerHTML ="Passwords must match.";
                                    return false;
                                }
                        else {
                                document.getElementById("passdiv1").className =" control-group success";
                                document.getElementById("passdiv2").className =" control-group success";
                                document.getElementById("submit").className ="btn btn-primary";
                                document.getElementById("passhelp").innerHTML ="Looks Good!.";
                                return true;
                            }
                        }
                    }
                </script>

正如您在脚本中看到的，一旦满足要求，两种情况下的类都会更改为“control-group success”默认情况下，我的提交按钮具有“disabled”类，导致该按钮不可单击。我尝试创建一个脚本，自动检查 emaildiv 和 passdiv2 的类名，并将按钮类从 btn btn-primary disabled 更改为一旦两个类都设置成功，将 code> 更改为 btn btn-primary。

这是我到目前为止所拥有的，根本不起作用

在顶部的更新解决方案中，我不再使用下面的脚本。

<script> 
function submit() {
    var x = document.getElementById("emaildiv").className;
    var y = document.getElementById("passdiv2").className;
    if (x == "control-group success" || y == "control-group success")
    {
        document.getElementById("submit").className ="btn btn-primary";
    }
    else
    {
        document.getElementById("submit").className ="btn btn-primary disabled";
    }
}
</script>

从午餐前我就一直在努力让这项工作成功，现在我回来了，但没有成功。请尽您所能提供帮助!谢谢!

更新:是因为没有任何东西调用函数submit()吗？如果是这样，我该如何让它自动执行此操作？

Answer 1

您的代码包含语法错误。 您必须引用提交的 id。

function submit() {
    var x = document.getElementById("emaildiv").className;
    var y = document.getElementById("passdiv2").className;
    if (x == "control-group success" || y == "control-group success")
    {
        document.getElementById("submit").className ="btn btn-primary";
    }
    else
    {
        document.getElementById("submit").className ="btn btn-primary disabled";
    }
}

我还没有测试过，如果你能提供简单的jsfiddle，那就太棒了。