javascript javascript表单验证if语句

javascript form validation if statements

提问by Bob Uni

I am building a registration form and I found out that the Safari browser doesn't work with the HTML5 'Required' tag. So I built this Javascript script to ensure that users MUST submit data or the form will not submit.

我正在构建一个注册表单，但我发现 Safari 浏览器不能使用 HTML5 'Required' 标签。所以我构建了这个 Javascript 脚本来确保用户必须提交数据，否则表单将不会提交。

However, if you enter a username and password, but no email address, the form still submits. (The form doesn't submit if you leave out username and/or password).

但是，如果您输入用户名和密码，但没有输入电子邮件地址，表单仍会提交。（如果您遗漏了用户名和/或密码，表格将不会提交）。

So the problem seems to be with the email address part of the script. I don't want the form to submit if the email field is blank.

所以问题似乎出在脚本的电子邮件地址部分。如果电子邮件字段为空，我不希望表单提交。

Here is my code:

这是我的代码：

<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>

Here is my form (inside a table)

这是我的表格（在桌子里面）

<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>

Thank you

谢谢

采纳答案by Michael Berkowski

It looks like you are focusing a non-existent item mypassword, which causes your script to terminate in error and the form to submit normally.

看起来您正在关注一个不存在的 item 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;

Here is the working code

这是工作代码

It is important to always develop JavaScript with your browser's error console open. You would have seen an error about an undefined object mypassword, which could point you to the faulty line in your code.

始终在浏览器的错误控制台打开的情况下开发 JavaScript，这一点很重要。您会看到有关 undefined object 的错误mypassword，这可能会将您指向代码中的错误行。

回答by Akhil Sekharan

Without the html5 tags, using a common className, It would be

如果没有 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>