アップデート
この問題の回避策を作成しました。hideパスワード フィールドに追加するだけで、電子メールが有効になると、スクリプトにそれらが表示されるようになりました。次に、パスワードが有効になると、[送信] ボタンが有効になるようにしました。このソリューションを反映するために、以下のコードを更新します
元の問題
Bootstrap フレームワークを使用してフォームを作成しています。2 つのスクリプトがあります (1 つはメールをチェックし、もう 1 つはパスワードをチェックします)。
このスクリプトの動作を確認してください: 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」に変更されます。デフォルトでは、私の送信ボタンには「無効」のクラスがあり、ボタンをクリックできません。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()ですか? もしそうなら、これを自動的に行うにはどうすればよいですか？