即使填写并检查了所有字段，表单也不提交

时间：2017-08-01 12:59:26

标签： javascript php html css

我是网页设计的初学者，这是我给的一个项目，但无论我做什么，表格都不会提交。即使所有输入都是正确的，我点击提交后仍然没有做任何事情。任何帮助表示赞赏。我用Google搜索了一个小时，但我没有做任何事情。

这只是表单的简单结构。我的主要目标是验证代码并发送到PHP脚本。

<html>
    <head>
        <title>Form</title>
        <style>
            h1,h2 {
                color:red;
                text-align:center;
            }
            #form {
                padding-left: 80px;
            }
            .fullname{  
                //border:1px solid;
                padding:0 0 0 80px;
                margin:0;
                color:red;
                font-style:italic;
                font-size:13px;
                white-space:nowrap;
                //float:left;
                //visibility:hidden; 
            }
            .N {
                //border-color:red;
                border-radius:5px;
                //text-shadow:0 0 2px #ddd;
            }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <!--onSubmit="return !!(validateFName() & validateLName() & validateGender() & validateMonth() & validateDay() & validateYear());" -->
        <form id="form" name="myForm" action="new1.php" onSubmit="return validateName()" >
            First Name:<input class="N" type="text" name="fname"  value="enter name 
                here" /><br>
            <div id="errorFName" class="fullname"></div>
            Last Name:<input class="N" type="text" name="lname" value="enter name here"/><br>
            <div id="errorLName" class="fullname"></div>
            Gender:<br>
            <input type="radio" name="sex" value="Male">Male
            <input type="radio" name="sex" value="Female">Female<br>
            <div id="gender" class="fullname" style="padding:0 0 0 15px;"></div>
            Date Of Birth:<br>
            Month:
            <select name="month">
                <option value="0">--Select Month--</option>
                <option value="1">Janaury</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
            &emsp;
            Day:
            <select name="day">
                <option value='No'>--Select Day--</option>
                <option value='Mo'>Monday</option>
                <option value='tu'>Tuesday</option>
                <option value='we'>Wednesday</option>
                <option value='th'>Thursday</option>
                <option value='fr'>Friday</option>
                <option value='sa'>Saturday</option>
                <option value='su'>Sunday</option>
            </select>
            &emsp;
            Year:
            <select name="year">
                <script>
                    for(var i = 2017; i >= 1900; i--){
                    document.write('<option value="'+i+'">'+i+'</option>');
                    }
                </script>
            </select>
            <br>
            <span id="month_div" class="fullname" style="padding:0 0 0 60px;"></span>
            <span id="day_div" class="fullname" style="padding:0 0 0 80px;"></span>
            <span id="year_div" class="fullname" style="padding:0 0 0 65px;"></span><br>
            <input type="submit" value="Submit">
        </form>

        <script>
            var firstName = document.forms.myForm.fname;
            var lastName = document.forms.myForm.lname;
            var gender = document.forms.myForm.sex;
            var months = document.forms.myForm.month;
            var days = document.forms.myForm.day;
            var years = document.forms.myForm.year;

            var fname_error = document.getElementById("errorFName");
            var lname_error = document.getElementById("errorLName");
            var gender_error = document.getElementById("gender");
            var month_error = document.getElementById("month_div");
            var day_error = document.getElementById("day_div");
            var year_error = document.getElementById("year_div");


            function validateName() {
                var validity = true;
                validity &= validateFName();
                validity &= validateLName();
                validity &= validateGender();
                validity &= validateMonth();
                validity &= validateDay();
                validity &= validateYear();
                return validity;
            }

            function validateFName() {
                if (firstName.value === "enter name here") {
                    firstName.value = "";
                    firstName.style.border = "1px solid red";
                    fname_error.textContent = "Fill User Name";
                    return false;
                }
                if (firstName.value !== "enter name here") {
                    // fname_error.innerHTML = "";   
                    return true;
                }
            }

            function validateLName() {
                if (lastName.value === "enter name here") {
                    lastName.value = "";
                    lastName.style.border = "1px solid red";
                    lname_error.textContent = "Fill User Name";
                    return false;
                }
            }

            function validateGender() {
                if (gender[0].checked || gender[1].checked) {
                    gender_error.innerHTML = "";
                    return true;
                } else {
                    gender_error.textContent = "select your sex";
                    return false;
                }
            }

            function validateMonth() {
                if (months.value !== "0") {
                    month_error.innerHTML = "";
                    day_error.style.padding = "0 0 0 175px";
                    return true;
                } else {
                    month_error.textContent = "select the month";
                    return false;
                }
            }

            function validateDay() {
                if (days.value !== "No") {
                    day_error.innerHTML = "";
                    year_error.style.padding = "0 0 0 150px";
                    return true;
                } else {
                    day_error.textContent = "select the day";
                    //day_error.style.padding = "0 0 0 80px";
                    return false;
                }
            }

            function validateYear() {
                if (years.value !== "2017") {
                    year_error.innerHTML = "";
                    return true;
                } else {
                    year_error.textContent = "select the year";
                    return false;
                }
            }
        </script>

    </body>
</html>

编辑：只是尝试以这种方式调试它，即使返回值为真，代码也只是通过了。

输出总是“它不起作用”

function validateName() {
    var validity = true;
    validity &= validateFName();
    if (validity === true)
        alert("it works FName");
    validity &= validateLName();
    if (validity === true)
        alert("it works LName");
    validity &= validateGender();
    if (validity === true)
        alert("it works Gender");
    validity &= validateMonth();
    if (validity === true)
        alert("it works Month");
    validity &= validateDay();
    if (validity === true)
        alert("it works Day");
    validity &= validateYear();
    alert("it works Year");
    if (validity === true)
        return validity;
    else
        alert("it dosnt works");
}

编辑2.现在我的问题是提交。它提交表单而不验证任何输入。它应该说“请填写字段”，但它只是转到php文件。

2 个答案:

答案 0 :(得分：0)

使用

var firstName = document.forms.myForm.fname.value;

您忘记在字段名称后添加值。

答案 1 :(得分：0)

检查此代码，希望它能正常工作，我更新你的一些代码并使用占位符所以不需要使用检查使用文本和更新＆amp; = to =和相关的一些代码，希望它现在可以正常工作

<html>
<head><title>Form</title>
    <style>
        h1, h2 {
            color: red;
            text-align: center;
        }

        #form {
            padding-left: 80px;
        }

        .fullname {
        / / border: 1 px solid;
            padding: 0 0 0 80px;
            margin: 0;
            color: red;
            font-style: italic;
            font-size: 13px;
            white-space: nowrap;
        / / float: left;
        / / visibility: hidden;
        }

        .N {
        / / border-color: red;
            border-radius: 5px;
        / / text-shadow: 0 0 2 px #ddd;
        }
    </style>
</head>
<body>
<h1>Welcome</h1>
<!--onSubmit="return !!(validateFName() & validateLName() & validateGender() & validateMonth() & validateDay() & validateYear());" -->
<form id="form" name="myForm" action="" method="post" onSubmit="return validateName()">
    First Name:<input class="N" type="text" name="fname" value="" placeholder="enter namehere"/><br>

    <div id="errorFName" class="fullname"></div>
    Last Name:<input class="N" type="text" name="lname" value="" placeholder="enter name here"/><br>

    <div id="errorLName" class="fullname"></div>
    Gender:<br>
    <input type="radio" name="sex" value="Male">Male
    <input type="radio" name="sex" value="Female">Female<br>

    <div id="gender" class="fullname" style="padding:0 0 0 15px;"></div>
    Date Of Birth:<br>
    Month:
    <select name="month">
        <option value="0">--Select Month--</option>
        <option value="1">Janaury</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>&emsp;
    Day:
    <select name="day">
        <option value='No'>--Select Day--</option>
        <option value='Mo'>Monday</option>
        <option value='tu'>Tuesday</option>
        <option value='we'>Wednesday</option>
        <option value='th'>Thursday</option>
        <option value='fr'>Friday</option>
        <option value='sa'>Saturday</option>
        <option value='su'>Sunday</option>
    </select>&emsp;
    Year:
    <select name="year">
        <script>
            for (var i = 2017; i >= 1900; i--) {
                document.write('<option value="' + i + '">' + i + '</option>');
            }
        </script>
    </select><br>
    <span id="month_div" class="fullname" style="padding:0 0 0 60px;"></span>
    <span id="day_div" class="fullname" style="padding:0 0 0 80px;"></span>
    <span id="year_div" class="fullname" style="padding:0 0 0 65px;"></span><br>
    <input type="submit" value="Submit">
</form>
<script>
     var firstName = document.forms.myForm.fname;
var lastName = document.forms.myForm.lname;
var gender = document.forms.myForm.sex;
var months = document.forms.myForm.month;
var days = document.forms.myForm.day;
var years = document.forms.myForm.year;

var fname_error = document.getElementById("errorFName");
var lname_error = document.getElementById("errorLName");
var gender_error = document.getElementById("gender");
var month_error = document.getElementById("month_div");
var day_error = document.getElementById("day_div");
var year_error = document.getElementById("year_div");


function validateName() {
    validity = true;
    validity = validateFName();
    validity = validateLName();
    validity = validateGender();
    validity = validateMonth();
    validity = validateDay();
    validity = validateYear();
  //  return validity;
    if(validateFName() && validateLName() && validateGender() && validateMonth() && validateYear()){
        document.getElementById("form").action = "http://localhost/new1.php";
    // change this url which your action
        document.getElementById("form").submit();
    } else {
        return false;
    }

}
function validateFName() {
    if (firstName.value == "") {
        firstName.value = "";
        firstName.style.border = "1px solid red";
        fname_error.textContent = "Fill User Name";
        return false;
    } else {
        fname_error.textContent = "";
        firstName.style.border = "1px solid #fff";
        return true;
    }

}
function validateLName() {
    if (lastName.value == "") {
        lastName.value = "";
        lastName.style.border = "1px solid red";
        lname_error.textContent = "Fill User Name";
        return false;
    } else {
        lname_error.textContent = "";
        lastName.style.border = "1px solid #fff";
        return true;
    }
}
function validateGender() {
    if (gender[0].checked || gender[1].checked) {
        gender_error.innerHTML = "";
        return true;
    }
    else {
        gender_error.textContent = "select your sex";
        return false;
    }
}
function validateMonth() {
    if (months.value !== "0") {
        month_error.innerHTML = "";
        day_error.style.padding = "0 0 0 175px";
        return true;
    }
    else {
        month_error.textContent = "select the month";
        return false;
    }
}
function validateDay() {
    if (days.value !== "No") {
        day_error.innerHTML = "";
        year_error.style.padding = "0 0 0 150px";
        return true;
    }
    else {
        day_error.textContent = "select the day";
        //day_error.style.padding = "0 0 0 80px";
        return false;
    }
}
function validateYear() {
    if (years.value !== "2017") {
        year_error.innerHTML = "";
        return true;
    }
    else {
        year_error.textContent = "select the year";
        return false;
    }
}
</script>
</body>
</html>
相关问题
最新问题