<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>
My question is why onsubmit is not working for form=registration. It should call the ValidateForm1 function. I put an 'alert("Inside function");' and it appeared but it does not catch empty input fields in the from. Instead it performs the form 'action="../model/userRegistrationAction.php"'.
you can use this
if(variable == "" || variable==null){
// your code here.
return false;
};
HTML
<a href="home.html"><img id="logo1" src="http://placehold.it/350x150" 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>
JS
window.onload = function() {
var hiddenInputs = document.getElementsByClassName("hidden");
var answer = document.getElementById("existingUser").checked;
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;
alert('Username: ' + userName + ' Password: ' + password);
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.