admin管理员组

文章数量:1315234

Hi everyone, I encountered an error with regards to my program in html and javascript. When I submit input information in the fields of name, email and age, it prompts an error message, saying that I must choose a gender. However, after prompting the error message, the information in the name, email and age has been deleted. This is my code, I hope someone could help me.

<html>
<head>
    <!-- Creating Page Title -->
    <title>validation</title>

    <!-- For Form validation we have to use JavaScript
    JavaScript needs only a browser to run, there is no need of 
    server to run JavaScript -->

    <script language="javascript">

        //Start JavaScript Function

        function verify() {

            //for field must take some input

            if (document.form1.name.value == "") {
                alert("Please give the name");
                document.form1.name.forus();
                return false;
            }

            //for field must take some input

            if (document.form1.email.value == "") {
                alert("Please give the email");
                return false;
            }

            // for field must take some input

            if (document.form1.age.value == "") {
                alert("Please give age");
                document.form1.age.focus();
                return false;
            }

            // alert thrown when age limit is below 18 and above 60

            if (document.form1.age.value < 18 || document.form1.age.value > 60) {
                alert("Please give Age range between 18 and 60");
                document.form1.age.focus();
                return false;
            }

            // Gender must be selected

            if (document.form1.gender[0].checked == false &&
                    document.form1.gender[1].checked == false) {
                alert("Please select gender");
                document.form1.gender.focus();
                return false;
            }

            // At least one checkbox must be checked

            if (document.form1.language1.checked == false &&
                    document.form1.language2.checked == false &&
                    document.form1.language3.checked == false) {
                alert("Please Select your choice of language(Atleast One)");
                return false;
            }

            //Country must be chosed

            if (document.form1.country.value == "") {
                alert("Please give country");
                document.form1.country.focus();
                return false;
            }

            //field must take some input

            if (document.form1.myaddress.value == "") {
                alert("Please give address");
                document.form1.myaddress.focus();
                return false;
            }

            //field must take some input

            if (document.form1.u_name.value == "") {
                alert("Please give username");
                document.form1.u_name.focus();
                return false;
            }

            //field must take some input

            if (document.form1.pass.value == "") {
                alert("Please give Password");
                document.form1.pass.focus();
                return false;
            }

            //password length must be greater than 5 characters

            if (document.form1.pass.value.lenght < 6) {
                alert("Please give a Password more than 5 characters");
                document.form1.pass.focus();
                return false;
            }

            // for field must take some input

            if (document.form1.r_pass.value == "") {
                alert("Please retype your password");
                document.form1.r_pass.focus();
                return false;
            }

            //password and confirm password must matched

            if ((document.form1.pass.value) != (document.form1.r_pass.value)) {
                alert("Your password does not match");
                document.form1.r_pass.value == "";
                document.form1.r_pass.focus();
                return false;
            }
            return( true );
        }
    </script>

</head>
<body>

<!-- Creating Form -->
<form method="POST" action="" name="form1">

    <!-- Creating Table, having 11rows and 2 columns. -->
    <table border="2" align="center" cellpadding="7">

        <!-- Start First Row -->
        <tr>
            <!-- Creating First Column -->
            <td><strong>Name:</strong></td>

            <!-- Creating Second Columns -->
            <td>
                <!-- TextBox -->
                <input type="text" name="name"/>
            </td>
            <!-- Close First Row -->
        </tr>

        <!-- Creting First Columns -->
        <td><strong>Email:</strong></td>

        <!-- Creating Second Columns -->
        <td>
            <!-- Textbox -->
            <input type="text" name="email"/>
        </td>
        <!-- Close Second row -->
        </tr>

        <tr>
            <td><strong>Age:</strong></td>
            <td>
                <!-- Textbox -->
                <input type="text" name="age" size="2"/>
            </td>
        </tr>

        <tr>
            <td><strong>Gender:</strong></td>
            <td>
                <!-- Radio Butong -->
                <input type="radio" name="gender" value="Male"/>Male
                <input type="radio" name="gender" value="Female"/>Female

            </td>
        </tr>

        <tr>
            <td><strong>Language:</strong></td>
            <td>
                <!-- Check box -->
                <input type="checkbox" name="language1" value="Hindi"/>Hindi
                <input type="checkbox" name="language2" value="English"/>English
                <input type="checkbox" name="language3" value="Urdu"/>Urdu
            </td>
        </tr>

        <tr>
            <td><strong>Country:</strong></td>
            <td>
                <!-- Combo Box -->
                <select name="country"/>
                <option value="" selected/>
                --Select--
                <option value="indi"/>
                India
                <option value="pakistan"/>
                Pakistan
                <option value="beangladesh"/>
                Beangladesh
                <option value="srilanka"/>
                Srilanka
                </select>
            </td>
        </tr>

        <tr>
            <td><strong>Address:</strong></td>
            <td>
                <!-- TextArea -->
                <textarea rows="5" cols="20" name="myaddress"/></textarea>
            </td>
        </tr>

        <tr>
            <td><strong>Username:</strong></td>
            <td>

                <!-- Textbox -->
                <input type="text" name="u_name"/>
            </td>
        </tr>

        <tr>
            <td><strong>Password:</strong></td>
            <td>
                <!-- Password Field -->
                <input type="password" name="pass"/>
            </td>
        </tr>

        <tr>
            <td><strong>Retype Password:</strong></td>
            <td>
                <!-- Password Field -->
                <input type="password" name="r_pass"/>
            </td>
        </tr>

        <tr align="center">

            <td>
                <!--Submit Button, Function verify need to be called when we process
                submit button-->
                <input type="submit" value="Submit" onClick="return (verify());"/>
            </td>

            <td>
                <!--Reset Button-->
                <input type="reset">
            </td>
        </tr>

        <!--Table Close-->
    </table>

    <!--Form Close -->
</form>
</body>
</html>

Hi everyone, I encountered an error with regards to my program in html and javascript. When I submit input information in the fields of name, email and age, it prompts an error message, saying that I must choose a gender. However, after prompting the error message, the information in the name, email and age has been deleted. This is my code, I hope someone could help me.

<html>
<head>
    <!-- Creating Page Title -->
    <title>validation</title>

    <!-- For Form validation we have to use JavaScript
    JavaScript needs only a browser to run, there is no need of 
    server to run JavaScript -->

    <script language="javascript">

        //Start JavaScript Function

        function verify() {

            //for field must take some input

            if (document.form1.name.value == "") {
                alert("Please give the name");
                document.form1.name.forus();
                return false;
            }

            //for field must take some input

            if (document.form1.email.value == "") {
                alert("Please give the email");
                return false;
            }

            // for field must take some input

            if (document.form1.age.value == "") {
                alert("Please give age");
                document.form1.age.focus();
                return false;
            }

            // alert thrown when age limit is below 18 and above 60

            if (document.form1.age.value < 18 || document.form1.age.value > 60) {
                alert("Please give Age range between 18 and 60");
                document.form1.age.focus();
                return false;
            }

            // Gender must be selected

            if (document.form1.gender[0].checked == false &&
                    document.form1.gender[1].checked == false) {
                alert("Please select gender");
                document.form1.gender.focus();
                return false;
            }

            // At least one checkbox must be checked

            if (document.form1.language1.checked == false &&
                    document.form1.language2.checked == false &&
                    document.form1.language3.checked == false) {
                alert("Please Select your choice of language(Atleast One)");
                return false;
            }

            //Country must be chosed

            if (document.form1.country.value == "") {
                alert("Please give country");
                document.form1.country.focus();
                return false;
            }

            //field must take some input

            if (document.form1.myaddress.value == "") {
                alert("Please give address");
                document.form1.myaddress.focus();
                return false;
            }

            //field must take some input

            if (document.form1.u_name.value == "") {
                alert("Please give username");
                document.form1.u_name.focus();
                return false;
            }

            //field must take some input

            if (document.form1.pass.value == "") {
                alert("Please give Password");
                document.form1.pass.focus();
                return false;
            }

            //password length must be greater than 5 characters

            if (document.form1.pass.value.lenght < 6) {
                alert("Please give a Password more than 5 characters");
                document.form1.pass.focus();
                return false;
            }

            // for field must take some input

            if (document.form1.r_pass.value == "") {
                alert("Please retype your password");
                document.form1.r_pass.focus();
                return false;
            }

            //password and confirm password must matched

            if ((document.form1.pass.value) != (document.form1.r_pass.value)) {
                alert("Your password does not match");
                document.form1.r_pass.value == "";
                document.form1.r_pass.focus();
                return false;
            }
            return( true );
        }
    </script>

</head>
<body>

<!-- Creating Form -->
<form method="POST" action="" name="form1">

    <!-- Creating Table, having 11rows and 2 columns. -->
    <table border="2" align="center" cellpadding="7">

        <!-- Start First Row -->
        <tr>
            <!-- Creating First Column -->
            <td><strong>Name:</strong></td>

            <!-- Creating Second Columns -->
            <td>
                <!-- TextBox -->
                <input type="text" name="name"/>
            </td>
            <!-- Close First Row -->
        </tr>

        <!-- Creting First Columns -->
        <td><strong>Email:</strong></td>

        <!-- Creating Second Columns -->
        <td>
            <!-- Textbox -->
            <input type="text" name="email"/>
        </td>
        <!-- Close Second row -->
        </tr>

        <tr>
            <td><strong>Age:</strong></td>
            <td>
                <!-- Textbox -->
                <input type="text" name="age" size="2"/>
            </td>
        </tr>

        <tr>
            <td><strong>Gender:</strong></td>
            <td>
                <!-- Radio Butong -->
                <input type="radio" name="gender" value="Male"/>Male
                <input type="radio" name="gender" value="Female"/>Female

            </td>
        </tr>

        <tr>
            <td><strong>Language:</strong></td>
            <td>
                <!-- Check box -->
                <input type="checkbox" name="language1" value="Hindi"/>Hindi
                <input type="checkbox" name="language2" value="English"/>English
                <input type="checkbox" name="language3" value="Urdu"/>Urdu
            </td>
        </tr>

        <tr>
            <td><strong>Country:</strong></td>
            <td>
                <!-- Combo Box -->
                <select name="country"/>
                <option value="" selected/>
                --Select--
                <option value="indi"/>
                India
                <option value="pakistan"/>
                Pakistan
                <option value="beangladesh"/>
                Beangladesh
                <option value="srilanka"/>
                Srilanka
                </select>
            </td>
        </tr>

        <tr>
            <td><strong>Address:</strong></td>
            <td>
                <!-- TextArea -->
                <textarea rows="5" cols="20" name="myaddress"/></textarea>
            </td>
        </tr>

        <tr>
            <td><strong>Username:</strong></td>
            <td>

                <!-- Textbox -->
                <input type="text" name="u_name"/>
            </td>
        </tr>

        <tr>
            <td><strong>Password:</strong></td>
            <td>
                <!-- Password Field -->
                <input type="password" name="pass"/>
            </td>
        </tr>

        <tr>
            <td><strong>Retype Password:</strong></td>
            <td>
                <!-- Password Field -->
                <input type="password" name="r_pass"/>
            </td>
        </tr>

        <tr align="center">

            <td>
                <!--Submit Button, Function verify need to be called when we process
                submit button-->
                <input type="submit" value="Submit" onClick="return (verify());"/>
            </td>

            <td>
                <!--Reset Button-->
                <input type="reset">
            </td>
        </tr>

        <!--Table Close-->
    </table>

    <!--Form Close -->
</form>
</body>
</html>
Share Improve this question edited Nov 3, 2012 at 12:02 Stumbler 2,1468 gold badges37 silver badges63 bronze badges asked Nov 3, 2012 at 10:22 user1796313user1796313 11 gold badge1 silver badge1 bronze badge 2
  • 1 If you set up a demo at jsfiddle then it might be easier for people to have a look. – Sean Dawson Commented Nov 3, 2012 at 10:24
  • Why this have 27k views - and no upvotes on answers or questions? – fotanus Commented May 31, 2014 at 1:59
Add a ment  | 

3 Answers 3

Reset to default 0

Here is a small code. You can build it on your own

    <script type="text/javascript">

//Start JavaScript Function

function verify()
{

//for field must take some input

if(document.forms["form1"]["name"].value=="")
{
alert("Please give the name");

return false;
}
}
</script>
    <form method="POST" action="test3.asp" name="form1" onSubmit="return verify()">

<!-- Creating Table, having 11rows and 2 columns. -->
<table border="2" align="center" cellpadding="7">

<!-- Start First Row -->
<tr>
<!-- Creating First Column -->
<td><strong>Name:</strong></td>

<!-- Creating Second Columns -->
<td>
<!-- TextBox -->
<input type ="text" name="name"/>
<input type="submit" value="Submit" />
</form>

Try it out

Please check this link - http://www.w3schools./js/js_form_validation.asp

Here you can find both empty field and email validation.

In order to keep the field data, you can use cookie/session or if you just use in page validation, u can directly set the it via JavaScript code

this.form.elements["element_name"].value = 'Some Value';

Here, element_name should be replaced with current validating filed name and Some Value should be the current value of the current validating field.

Use this code before return false.

Thanks

<script type="text/javascript">
function submitForm(){
     if(document.forms[0].name.value=="" ){
      window.alert("name Required");
      return false;
    }
   }
</script>

本文标签: htmlFORM VALIDATION using javascript by reyanpapaStack Overflow