質問が示唆しているように、私はJS検証を備えたHTMLフォームを持っています。現在、検証で詳細をデバッグしていますが、問題は、onSubmit 関数がエラーを発生させるべきときにエラーを発生させることですが、フォームは引き続き送信されます。理由はわかりません。StackOverflowで100万件と1件の同様の問題を確認しましたが、私のものと同じ原因があるようには見えません-確認して確認して確認しました。誰かが助けてくれれば、とても感謝しています。
また、コードを短縮できることはわかっていますが、この問題が解決したらそれを行います。
形：
<form name="registerForm" method="post" action="index.php" onSubmit="return validateForm()">
<table class="formTable" >
<tr>
<td><i class="smallprint">* denotes a required field.</i></td>
</tr>
<tr>
<td>
<input type="text" maxlength="32" width="32" name="regTxtUsrName">
</td>
<td>
User Name* <i class="smallprint"> between 6 and 32 characters (letters, numbers and underscores only)</i><br />
<b class="error" id="userNameError">Error: Please enter a user name between 6 and 32 characters, using letters, numbers and underscores</b>
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="32" width="32" name="regTxtFName">
</td>
<td>
First Name*<br />
<b class="error" id="fNameError">Error: Please enter your first name</b>
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="32" width="32" name="regTxtSName">
</td>
<td>
Surname*<br />
<b class="error" id="sNameError">Error: Please enter your surname</b>
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="32" width="32" name="regTxtEmail">
</td>
<td>
Email* <i class="smallprint">Please use a valid email address, it will be used to validate your account</i><br />
<b class="error" id="emailError1">Error: Please enter an email address<br /></b>
<b class="error" id="emailError2">Error: This is not a valid email address</b>
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="32" width="32" name="regTxtEmailConf">
</td>
<td>
Confirm Email*<br />
<b class="error" id="emailConfError">Error: Both email addresses must match</b>
</td>
</tr>
<tr>
<td>
<input type="password" maxlength="32" width="32" name="regTxtPassword">
</td>
<td>
Password* <i class="smallprint">Between 6 and 32 characters, using at least one letter and one number</i><br />
<b class="error" id="passwordError">Error: Please enter a valid password</b>
</td>
</tr>
<tr>
<td>
<input type="password" maxlength="32" width="32" name="regTxtPasswordConf">
</td>
<td>
Confirm Password*<br />
<b class="error" id="passwordConfError">Error: Both email passwords must match</b>
</td>
</tr>
</table>
<br />
<div class="textCenter">
<input type="checkbox" class="center" name="regChkTos"> - Check this box if you agree to the Terms of Service. You must agree in order to regster.
<br />
<br />
<input type="submit" name="regSubmit" value="Register">
</div>
</form>
JS:
<script type="text/javascript">
function validateForm()
{
var noError = true;
if (!validateUserName())
{
noError = false;
}
if (!validateFName())
{
noError = false;
}
if (!validateSName())
{
noError = false;
}
if (!validateEmail())
{
noError = false;
}
if (!validateConfirmEmail())
{
noError = false;
}
if (!validatePassword())
{
noError = false;
}
if (!validateConfirmPassword())
{
noError = false;
}
return noError;
}
function validateUserName()
{
var userName = document.forms["registerForm"]["regTxtUsrName"];
var regex = /^\w+$/;
if (userName.value==null || userName.value=="" || userName.value.length < 6 || !regex.test(userName.value))
{
userName.style.border = "2px solid red";
document.getElementById('userNameError').style.display="inline";
return false;
}
else
{
userName.style.border = "2px solid #0f0";
document.getElementById('userNameError').style.display="none";
return true;
}
}
function validateFName()
{
var name = document.forms['registerForm']['regTxtFName'];
if (name.value == null || name.value == '')
{
name.style.border = "2px solid red";
document.getElementById('fNameError').style.display="inline";
return false;
}
else
{
name.style.border = "2px solid #0f0";
document.getElementById('fNameError').style.display="none";
return true;
}
}
function validateSName()
{
var name = document.forms['registerForm']['regTxtSName'];
if (name.value == null || name.value == '')
{
name.style.border = "2px solid red";
document.getElementById('sNameError').style.display="inline";
return false;
}
else
{
name.style.border = "2px solid #0f0";
document.getElementById('sNameError').style.display="none";
return true;
}
}
function validateEmail()
{
noError = true;
var email = document.forms['registerForm']['regTxtEmail'];
var atpos=email.value.indexOf("@");
var dotpos=email.value.lastIndexOf(".");
if (email.value == null || email.value == '')
{
email.style.border = '2px solid red';
document.getElementById('emailError1').style.display='inline';
noError = false;
}
else
{
document.getElementById('emailError1').style.display='none';
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.value.length)
{
email.style.border = '2px solid red';
document.getElementById('emailError2').style.display='inline';
noError = false;
}
else
{
email.style.border = '2px solid #0f0';
document.getElementById('emailError2').style.display='none';
}
}
return noError
}
function validateConfirmEmail()
{
var email = document.forms['registerForm']['regTxtEmail'];
var emailConf = document.forms['registerForm']['regTxtEmailConf'];
if (email.value != emailConf.value)
{
emailConf.style.border = '2px solid red';
document.getElementById('emailConfError').style.display = 'inline';
return false
}
else
{
emailConf.style.border = '2px solid 0f0';
document.getElementById('emailConfError').style.display = 'none';
return true
}
}
function validatePassword()
{
var password = document.forms['registerForm']['regTxtPassword'];
if (password.value == null || password.value == '' || password.value.length < 6 || password.value.search(/\d/) == -1 || password.value.search(/[A-z]/) == -1)
{
password.style.border = '2px solid red';
document.getElementById('passwordError').style.display = 'inline';
return false;
}
else
{
password.style.border = '2px solid 0f0';
document.getElementById('passwordError').style.display = 'none';
return true;
}
}
function validatePasswordConf()
{
var password = document.forms['registerForm']['regTxtPassword'];
var passwordConf = document.forms['registerForm']['regTxtPasswordConf'];
if (password.value != passwordConf.value)
{
passwordConf.style.border = '2px solid red';
document.getElementById('passwordConfError').style.display = 'inline';
return false;
}
else
{
passwordConf.style.border = '2px solid 0f0';
document.getElementById('passwordConfError').style.display = 'none';
return true;
}
}
</script>
はい、このスクリプトは、フォームが配置されている HTML ページにあります。すべてのフィールドを空白のままにし、送信をクリックすると、エラーが一時的にポップアップし、action="index.php"とにかく呼び出されます。
助けてくれてありがとう。