提交时无法正常工作.即使输入字段为空,它仍然会转到表单操作
onsubmit not working correctly. It still goes to the form action even is an input field is empty
<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>
我的问题是为什么提交不适用于表单=注册。它应该调用验证表单 1 函数。我放了一个"alert("内部函数");",它出现了,但它没有捕获发件人中的空输入字段。相反,它执行的形式为"action="。/model/userRegistrationAction.php"'.
演示 jsFiddle
.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
你可以使用它
if(variable == "" || variable==null){
// your code here.
return false;
};
相关文章:
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 如何根据所选选项值重定向表单操作
- 从输入时提交到jQuery,无需提交按钮,无需表单操作
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 使用Javascript/jQuery以编程方式将当前锚点/哈希/片段附加到任何表单操作url
- Rails-带有单选按钮的表单,带有启用/禁用附加元素的javascript操作
- jQuery表单验证(如果==“执行此操作”)仅适用于第一次输入
- 如何根据所选的下拉值更改表单值操作
- 当我的表单中已经有一个操作时添加JavaScript
- 表单操作值未从attr()函数中获取
- 表单在由ajax部分Ruby创建时有错误的操作
- JavaScript 表单操作更改RC方法发布文本输入提交
- 具有两个提交按钮和两个不同操作的 HTML 表单
- 如何在开机自检前操作表单文件输入
- 在提交之前操作表单值而不向用户显示
- 如何在支柱中使用操作表单设置文本框值
- 当一页上有超过24个表单时,操作表单数据
- 如何在jQuery提交处理程序中操作表单元素
- 更改弹簧表单上的操作:表单提交
- 如何将 PHP 变量加载到操作表单帖子中