1

更新

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

原始问题

我正在使用 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>

正如您在脚本中看到的，一旦满足要求，两种情况下的类都会更改为“控制组成功” 默认情况下，我的提交按钮有一个“禁用”类，导致按钮不可点击。我试图创建一个脚本，该脚本会自动检查 theemaildiv和 the的类名，并在两个类都设置为成功后将passdiv2按钮类从 更改为btn btn-primary disabled。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>

从午饭前开始，我一直在努力完成这项工作，现在我回来了，但没有成功。请尽你所能提供帮助！谢谢！

更新：是不是因为没有什么呼唤function submit()？如果是这样，我将如何使其自动执行此操作？

4

1 回答 1

0

您的代码包含语法错误。您必须引用提交的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 那就太棒了。

于 2013-05-10T19:46:14.970 回答