2

登録フォームを作成していますが、Safari ブラウザーが HTML5 の「必須」タグで機能しないことがわかりました。そこで、この Javascript スクリプトを作成して、ユーザーがデータを送信する必要があるか、フォームが送信されないようにしました。

ただし、ユーザー名とパスワードを入力し、電子メール アドレスを入力しない場合でも、フォームは送信されます。(ユーザー名やパスワードを省略した場合、フォームは送信されません)。

したがって、問題はスクリプトの電子メール アドレス部分にあるようです。メール フィールドが空白の場合、フォームを送信したくありません。

これが私のコードです：

<script>
function ValidateLoginForm()
{
    var username = document.form1.username;
    var password = document.form1.password;
    var email = document.form1.email;



      if (username.value == "")
    {
        alert("Your username wasn't recognised.");
        username.focus();
        return false;
    }

      if (password.value == "")
    {
        alert("Please enter a password.");
        password.focus();
        return false;
    }
      if (email.value == "")
    {
        alert("Please enter your email address.");
        mypassword.focus();
        return false;
    }
    else{
    return true;
    }
}
</script>

これが私のフォームです（テーブル内）

<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="login/process.php" onsubmit="return ValidateLoginForm();">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><center><strong>Registration Form</strong></center></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="username" type="text" id="username" required></td>
</tr>
<tr>
<td>Password*</td>
<td>:</td>
<td><input name="password" type="text" id="password" pattern=".{5,}" title="Minimum length of 5 letters or numbers."  required></td>
</tr>
<tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input name="email" type="text" id="email" required></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="submit" value="Submit Registration Form"></td>
<p>*Password must consist of numbers and letters.. 5 Characters minimum.</p>
</tr>
</table>
</td>
</form>
</tr>
</table>

ありがとうございました

4

2 に答える 2

1

存在しないアイテムmypasswordに焦点を合わせているようです。これにより、スクリプトが誤って終了し、フォームが正常に送信されます。

if (email.value == "")
{
    alert("Please enter your email address.");
    // Focus the email rather than mypassword (which doesn't exist)
    email.focus();
    return false;
}
// All's well if you got this far, return true
return true;

これが作業コードです

ブラウザのエラーコンソールを開いた状態でJavaScriptを開発することが常に重要です。未定義のオブジェクトに関するエラーが表示mypasswordされ、コード内の誤った行を示している可能性があります。

于 2012-11-24T14:09:20.473 に答える
0

html5 タグがなければ、共通の className を使用すると、次のようになります。

<form name="form1" method="post" action="login/process.php" onsubmit="return ValidateLoginForm();">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><center><strong>Registration Form</strong></center></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input class="inputElement" type="text" name="username" id="username" ></td>
</tr>
<tr>
<td>Password*</td>
<td>:</td>
<td><input class="inputElement" type="text" name="password" id="password" pattern=".{5,}" title="Minimum length of 5 letters or numbers."  ></td>
</tr>
<tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input class="inputElement" type="text" name="email" id="email" ></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="submit"  value="Submit Registration Form"></td>
<p>*Password must consist of numbers and letters.. 5 Characters minimum.</p>
</tr>
</table>
</td>
</form>


<script type="text/javascript">

function ValidateLoginForm()
{
    var inputElements = document.getElementsByClassName('inputElement');;
    for(var i=0;i<inputElements.length;i++){
        if(!inputElements[i].value){
            alert(inputElements[i].name +' cannot be empty');
            return false;
        }
    }
    return true;
}
</script>
于 2012-11-24T14:26:10.723 に答える