<script src="C:/xampp/htdocs/book_apps/ALLAsWebsite/jquery-1.10.2.js"></script>
<html>
<head>
<title>User Login or Register</title>
<link rel="stylesheet" href="../main.css" >
<script>
//This function Hides the default radio button from when page loads
function windowLoad()
{
//var radioButtonNo= document.getElementById("notExistingUser");
var hiddenInputs= document.getElementsByClassName("hidden");
var answer= document.getElementById("existingUser").defaultChecked;
if(answer)
{
for( var i=0; i < hiddenInputs.length; i++)
{
hiddenInputs[i].style.display="none";
}
}
}//end function one
//This function hides the forms when a user toggles the radio buttons
function showHide()
{
var radioButtonNo= document.getElementById("notExistingUser");
var radioButtonYes= document.getElementById("existingUser");
var hiddenInputs= document.getElementsByClassName("hidden");
var hiddenInputs1= document.getElementsByClassName("hidden1");
for( var i=0; i < hiddenInputs.length; i++)
{
if(radioButtonNo.checked)
{
hiddenInputs[i].style.display="table";
}
else
{
hiddenInputs[i].style.display="none";
}
}//end of for loop one
if(radioButtonNo.checked)
{
for( var i=0; i < hiddenInputs1.length; i++)
{
hiddenInputs1[i].style.display="none";
}
}
if(radioButtonYes.checked)
{
for( var i=0; i < hiddenInputs1.length; i++)
{
hiddenInputs1[i].style.display="table";
}
}
}//end function
//This function will check if a rquired input is not empty.
function ValidateForm1(objForm)
{
var name= objForm.name.value;
var number= objForm.pNumber.value;
var streetAddress= objForm.streetAddress.value;
var city= objForm.city.value;
var state= objForm.state.value;
var zip= objForm.zip.value;
var email= objForm.email.value;
//var email= document.forms["regisration"]["email"].value; didn't work
alert("inside the form alla");
if(name.length == 0|| name === " ")
{
alert("Please input your name." );
return false;
}
if(number.length == 0 || number == " ")
{
alert("Please input you phone number." );
return false;
}
if(streetAddress.length == 0 || streetAddress == " ")
{
alert("Please input your street address." );
return false;
}
if(city.length == 0 || city == " ")
{
alert("Please input the city name." );
return false;
}
if(state.length == 0 || state == " ")
{
alert("Please input the state name." );
return false;
}
if(zip.length == 0 || zip == " ")
{
alert("Please input your zip code." );
return false;
}
if(email.length == 0 || email == " ")
{
alert("Please input your email address." );
return false;
}
return true;
}//end function
function ValidateForm2(objForms)
{
var userName= objForms.email.value;
var password= objForms.password.value;
//var password= document.forms["userLogin"]["password"].value;
if(userName.length == 0 || userName == " ")
{
alert("Please input you email address.");
return false;
}
if (password.length == 0 || password == " ")
{
alert("Please input your password.");
return false;
}
return true;
}//end function
</script>
</head>
<body onload="javascript:windowLoad();">
<a href="home.html"><img id="logo1" src="../pictures/back4.png" alt="HOME" title="Back to home page" ></a>
<div id="question"><p> Are you a returning customer?</p>
<ul>
<li><input type="radio" name="input" id="existingUser" value="yes" checked="checked" onclick="showHide()"/>YES, sign in</li>
<li><input type="radio" name="input" id="notExistingUser" value="no" onclick="showHide()"/>NO, I would like to register</li>
</ul>
</div>
<br>
<div id="FORM1">
<div class="registration">
<h2 class="hidden">User Registration</h2>
<form name="registration" action="../model/userRegistrationAction.php" onsubmit="return ValidateForm1(this);" method="post" class="hidden" id="forms">
<br />
<label class="hidden">Full Name:</label>
<input type="input" id="inputName" name="name" placeholder="John Doe" class="hidden" />
<br />
<label class="hidden">Phone Number:</label>
<input type="tel" id="inputPhone" name="pNumber" class="hidden" />
<br />
<label class="hidden">Street Address:</label>
<input type="input" id="inputAddress" name="streetAddress" placeholder="123 Jefferson Rd." class="hidden"/>
<br />
<label class="hidden">Apartment Number:</label>
<input type="text" id="inputAddress" name="aptNumber" class="hidden"/>
<br />
<label class="hidden">City:</label>
<input type="input" id="inputAddress" name="city" class="hidden"/>
<br />
<label class="hidden">State:</label>
<input type="input" id="inputAddress" name="state" class="hidden"/>
<br />
<label class="hidden">Zip code:</label>
<input type="input" id="inputAddress" name="zipCode" class="hidden"/>
<br />
<label class="hidden">Email:</label>
<input type="email" id="inputEmail" name="email" placeholder="JohnDoe@domain.com" class="hidden" />
<br />
<label class="hidden"> </label>
<input type="submit" value="Register" class="hidden"/>
<br />
</form>
</div>
</div>
<div id="FORM2">
<div class="login">
<h2 class="hidden1">User Login</h2>
<form name="userLogin" action="../model/userLoginAction.php" onsubmit="return ValidateForm2(this);" method="post" class="hidden1" id="forms">
<label class="hidden1">Email:</label>
<input type="email" id="emailinput" name="email" class="hidden1"/>
<br />
<label class="hidden1">Password:</label>
<input type="password" id="passwordinput" name="password" class="hidden1"/>
<br />
<label class="hidden1"> </label>
<input type="submit" value="Login" class="hidden1"/>
<br />
</form>
</div>
</div>
<div id="inputDescriptionSection">
<div id="FORM-DESCRIPTION1" class="hidden">
<p class="hidden">User Registration Guidelines</p>
<ul class="hidden">
<li class="hidden">*Phone number input must be in the following form: 9312181122. No symbols like '-'</li>
<li class="hidden">*Apartment number may be left empty</li>
<li class="hidden">*City name may only consist of alphabetical characters and spaces </li>
<li class="hidden">*State name may only consist of alphabetical characters and spaces </li>
<li class="hidden">*Zip code may only consist of five digits </li>
<li class="hidden">*Email address guidelines:</li>
<li class="hidden"> 1. A maximum of thirty characters in length</li>
<li class="hidden"> 2. May consist of lowercase or uppercase characters, digits '0-9', underscores, and dashes '-'.</li>
<li class="hidden"> 3. Must begin with a alphabetical character.
<li class="hidden"> 4. Must end with a '.com' extension</li>
</ul>
</div>
<div id="FORM-DESCRIPTION2">
<p class="hidden1">User login guidelines:</p>
<ul class="hidden1">
<li class="hidden1"> User name is the same as the email you used to register </li>
<li class="hidden1"> Password by default is set to "password" and are case sensitive </li>
</ul>
</div>
</div>
</body>
</html>
<script>
//JS code
</script>
我的问题是为什么 onsubmit 不适用于 form=registration。它应该调用 ValidateForm1 函数。我放了一个'警报（“内部功能”）；' 它出现了，但它没有在 from 中捕获空输入字段。相反，它执行'action="../model/userRegistrationAction.php"'的形式。