いくつかのフィールドでHTML登録フォームを作成しました。また、各フィールドで検証を設定しました。しかし、電子メールの検証は正しく機能していません。以下は私のHTMLページです。私は電子メールの検証を設定するにはどうすればよいhtmlテンプレートで電子メールを検証できません
home.html
<html >
<head>
<!--external javascript-->
<script type="text/javascript">
function validateForm()
{
var x=document.forms["form1"]["firstname"];
if (x.value=="")
{
alert("Please enter the First name.");
x.focus();
return false;
}
x=document.forms["form1"]["lastname"];
if(x.value=="")
{
alert("Please enter the Last name.");
x.focus();
return false;
}
if((document.form1.gender[0].checked==false)&&(document.form1.gender[1].checked==false))
{
document.form1.gender[0].focus();
alert("Please select a gender.");
return false;
}
var dd=document.form1.dd.value;
var mmm=document.form1.mmm.value;
var yyyy=document.form1.yyyy.value;
if(!validdate(dd,mmm,yyyy))
{
return false;
}
x= document.getElementById("email");
if(x.value==null || x.value=="")
{
alert("Please enter the Email.");
x.value="";
x.focus();
return false;
}
if(confirm("Do you want to submit the form?"))
{
alert("Registration Form Submitted Successfully.");
}
else
return false;
}
function validdate(dd,mm,yyyy)
{
var dateobj = new Date(yyyy, mm, dd);
var datecurrent= new Date();
if((dateobj.getMonth()!=mm)||(dateobj.getDate()!=dd)||(dateobj.getFullYear()!=yyyy)||(dateobj>datecurrent))
{
alert("Please select a valid date.");
return false;
}
return true;
}
function confirmreset()
{
return confirm("Do you want to reset the form?");
}
</script>
</head>
<body>
<center>
<h1>Demo Registration Form</h1>
<form name="form1" method="post" action="success.html">
<table border='0'>
<tr>
<td><LABEL for="firstname">First Name:<sup style="color:#F00">*</sup> </LABEL></td>
<td><INPUT type="text" id="firstname"></td>
</tr>
<tr>
<td><LABEL for="lastname">Last Name:<sup style="color:#F00">*</sup> </LABEL></td>
<td><INPUT type="text" id="lastname"></td>
</tr>
<tr>
<td><LABEL for="gender">Gender:<sup style="color:#F00">*</sup> </LABEL></td> <td><INPUT type="radio" name="gender" value="Male"> Male
<INPUT type="radio" name="gender" value="Female"> Female </td>
</tr>
<tr>
<td><LABEL for="dob">Date of Birth:<sup style="color:#F00">*</sup> </LABEL></td>
<td>
<select id="dd">
<option value="dd">DD</option>
<script type="text/javascript">
for(var i=1;i<32;i++)
document.write("<option value='"+i+"'>" + i+"</option> ");
</script>
</select>
</select>
<select id="mmm">
<option value="mmm">MMM</option>
<option value="0">JAN</option>
<option value="1">FEB</option>
<option value="2">MAR </option>
<option value="3">APR</option>
<option value="4">MAY</option>
<option value="5">JUN</option>
<option value="6">JUL</option>
<option value="7">AUG</option>
<option value="8">SEP</option>
<option value="9">OCT</option>
<option value="10">NOV</option>
<option value="11">DEC</option>
</select>
<select id="yyyy">
<option value="yyyy"selected>YYYY</option>
<script type="text/javascript">
var dt= new Date();
for(var i=1979;i<=dt.getFullYear();i++)
document.write("<option value='"+i+"'>" + i+"</option> ");
</script>
</select>
</td>
</tr>
<tr>
<td><LABEL for="email" style="text-align:left;">Email:<sup style="color:#F00">*</sup> </LABEL></td>
<td><INPUT type="text" id="email"></INPUT>
</td>
</tr>
<tr>
<td></td><td><br/><INPUT type="submit" onClick="return validateForm()" value="Submit">
<INPUT type="reset" onClick="return confirmreset()"></td>
</tr>
<tr>
<td></td><td style="font-size:12px;text-align:right;"><br/><i style="color:red;font-size:12px;align:right;" >* - Mandatory</i></td>
</tr>
</table>
</FORM></center>
</body>
</html>
。また、与えられたコードでpassword and confirm password fields
を設定したいのですが、助けてください。
type = "text"ではなくを使用してください。 – Marcin