Javascript 表单只是don'；即使填写并检查了所有字段，也不要提交_Javascript_Php_Html_Css

Javascript 表单只是don'；即使填写并检查了所有字段，也不要提交

javascript php html css

Javascript 表单只是don'；即使填写并检查了所有字段，也不要提交,javascript,php,html,css,Javascript,Php,Html,Css,我是一个网页设计的初学者，这是一个项目，我给了，但无论我做什么形式只是不会提交。即使所有的输入都是正确的，但在我单击submit之后，它仍然不会执行任何操作。感谢您的帮助。我在谷歌上搜索了一个小时，但我所做的一切都不管用这只是一个简单的表单结构。我的主要目标是验证代码并将其发送到PHP脚本 <html> <head> <title>Form</title> <style>

我是一个网页设计的初学者，这是一个项目，我给了，但无论我做什么形式只是不会提交。即使所有的输入都是正确的，但在我单击submit之后，它仍然不会执行任何操作。感谢您的帮助。我在谷歌上搜索了一个小时，但我所做的一切都不管用

这只是一个简单的表单结构。我的主要目标是验证代码并将其发送到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>

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

使用

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

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

使用

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

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

检查此代码，希望它能工作，我更新了您的一些代码并使用了占位符，因此无需使用文本检查和更新&=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>


形式
h1，h2{
颜色：红色；
文本对齐：居中；
}
#形式{
左侧填充：80px；
}
.全名{
//边框：1像素固体；
填充：0 80px；
保证金：0；
颜色：红色；
字体：斜体；
字体大小：13px；
空白：nowrap；
//浮动：左；
//可见性：隐藏；
}
.N{
//边框颜色：红色；
边界半径：5px；
//text shadow:0 0 2 px#ddd；
}
欢迎
名字：

姓氏：

性别：

男性
女性

出生日期：

月份：
--选择月份--
亚纳里
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
&emsp；
日期：
--选择日期--
星期一
星期二
星期三
星期四
星期五
星期六
星期日
&emsp；
年份：
对于（var i=2017；i>=1900；i--）{
文件。写入（“”+i+“”）；
}




var firstName=document.forms.myForm.fname；
var lastName=document.forms.myForm.lname；
var-gender=document.forms.myForm.sex；
var月数=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（“性别”）；
var month_error=document.getElementById（“month_div”）；
var day_error=document.getElementById（“day_div”）；
var year\u error=document.getElementById（“year\u div”）；
函数validateName（）{
有效性=真实；
validity=validateFName（）；
validity=validateLName（）；
有效性=validateGender（）；
有效性=validateMonth（）；
有效性=validateDay（）；
有效性=validateYear（）；
//返回有效期；
if（ValidateName（）&&ValidateName（）&&validateGender（）&&validateMonth（）&&validateYear（））{
document.getElementById（“表单”）.action=”http://localhost/new1.php";
//更改您的操作所需的url
document.getElementById（“表单”）.submit（）；
}否则{
返回false；
}
}
函数validateFName（）{
如果（firstName.value==“”）{
firstName.value=“”；
firstName.style.border=“1px纯红色”；
fname_error.textContent=“填写用户名”；
返回false；
}否则{
fname_error.textContent=“”；
firstName.style.border=“1px solid#fff”；
返回true；
}
}
函数validateLName（）{
如果（lastName.value==“”）{
lastName.value=“”；
lastName.style.border=“1px实心红色”；
lname\u error.textContent=“填写用户名”；
返回false；
}否则{
lname_error.textContent=“”；
lastName.style.border=“1px solid#fff”；
返回true；
}
}
函数validateGender（）{
如果（性别[0]。选中| |性别[1]。选中）{
性别_error.innerHTML=“”；
返回true；
}
否则{
性别\ u error.textContent=“选择您的性别”；
返回false；
}
}
函数validateMonth（）{
如果（月数值！=“0”）{
月份_error.innerHTML=“”；
day_error.style.padding=“0 175px”；
返回true；
}
否则{
月份\u error.textContent=“选择月份”；
返回false；
}
}
函数validateDay（）{
如果（days.value！=“否”）{
day_error.innerHTML=“”；
年份\u error.style.padding=“0 150px”；
返回true；
}
否则{
day_error.textContent=“选择日期”；
//day_error.style.padding=“0 80px”；
返回false；
}
}
函数validateYear（）{
如果（年值！=“2017”）{
年份_error.innerHTML=“”；
返回true；
}
否则{
年份\u error.textContent=“选择年份”；
返回false；
}
}

检查此代码，希望它能工作，我会更新您的一些代码并使用占位符，因此无需使用文本检查和更新&=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>


形式
h1，h2{
颜色：红色；
文本对齐：居中；
}
#形式{
左侧填充：80px；
}
.全名{
//边框：1像素固体；
填充：0 80px；
保证金：0；
颜色：红色；
字体：斜体；
字体大小：13px；
空白：nowrap；
//浮动：左；
//可见性：隐藏；
}
.N{
//边框颜色：红色；
边界半径：5px；
//text shadow:0 0 2 px#ddd；
}
欢迎
名字：

姓氏：

性别：

男性
女性

日期