0
<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">&nbsp;</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">&nbsp;</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"'的形式。

4

2 回答 2

0

你可以用这个

if(variable == "" || variable==null){
   // your code here.
return false;
 };
于 2013-10-24T19:44:09.253 回答
0

演示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">&nbsp;</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">&nbsp;</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
于 2013-10-24T20:30:55.480 回答