UPDATE允许使用Javascript
提交的引导基于类别名称按钮我创建了一个解决此问题。我只是将hide
添加到密码字段中,然后在电子邮件有效后让脚本显示它们。然后我做了它,一旦有效的密码,提交按钮被启用。我会更新我下面的代码,以反映该解决方案
原来的问题
我创建使用引导框架的形式。我有两个脚本(一个用于检查电子邮件和另一个用于检查密码)。
查看此脚本正在操作中: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>
正如你可以在脚本中看到,一旦需求得到满足,在这两种情况下的类都改为“控制组成功“默认情况下,我的提交按钮有一个”禁用“类,导致按钮不可点击。我试图创建一个脚本,它自动检查emaildiv
和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()
?如果是的话,我会如何使它自动做到这一点?
你可以使用你所有的代码在jsfiddle.net上创建一个jsfiddle吗? – sbspk 2013-05-10 19:51:32
那么它必须让所有的引导脚本和CSS链接到它的工作。但是我可以给这个程序一个链接:http://www.green-panda.com/adminarea/temp.php,然后点击“添加新用户”按钮,它应该提供这个表单。 – user2371301 2013-05-10 19:54:29
你甚至不需要禁用按钮。请使用这篇文章来了解基本的表单验证http://www.tutorialspoint.com/javascript/javascript_form_validations.htm – sbspk 2013-05-10 20:04:23