Question

我有一个HTML表单，我使用JavaScript来检查空字段以停止表单提交，但即使任何一个或所有字段为空，表单也会提交到URL in action属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <script type="text/javascript">
        function validate() {


        var fname = document.forms["form1"]["fname"].value;
        var lname = document.forms["form1"]["lname"].value;
        var ID = document.forms["form1"]["ID"].value;
        var Password = document.forms["form1"]["Password"].value;

        if(fname == null || lname == null || ID == null || Password == null)
        {
            alert("Please enter all the fields");
            return false;
        };

    }
    </script>

</head>
<body style = "font-family: Lato">

    <div style="padding-left: 10%">
    <h1>Welcome to my site</h1><br>
    </div>
    <div style="text-align: center">
       <form  name="form1" onsubmit="return validate()" method = "post" id="form1"  action = "http://127.0.0.1:2906/success" style="padding-top: 2%">
           <label id="user" style="font-size: 20px">Username</label><br>
           <input type="text" name = "ID" placeholder = "Username" style = "padding-left: 0.2%;"><br><br>
           <label style="font-size: 20px">First name</label><br>
           <input type="text" name = "fname" id="fname" placeholder = "First name" style = "padding-left: 0.2%"><br><br>
           <label style="font-size: 20px">Last name</label><br>
           <input type="text" name = "lname" placeholder = "Last name" style = "padding-left: 0.2%"><br><br>
           <label style="font-size: 20px">Password</label><br>
           <input type = "password" name = "Password" placeholder = "Password" style = "padding-left: 0.2%"><br><br><br>
           <input type = "submit"  value = "Sign up" style="width:10%;height: 40px">
        </form>
    </div>

</body>
</html>

Answer 1

你的问题是input.value总是返回一个字符串。如果未填写字段，则其值将为空字符串''，该字符串不等于null。请尝试使用!value，这将使用空字符串。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <script type="text/javascript">
        function validate() {


        var fname = document.forms["form1"]["fname"].value;
        var lname = document.forms["form1"]["lname"].value;
        var ID = document.forms["form1"]["ID"].value;
        var Password = document.forms["form1"]["Password"].value;

        if(!fname || !lname || !ID || !Password)
        {
            alert("Please enter all the fields");
            return false;
        };

    }
    </script>

</head>
<body style = "font-family: Lato">

    <div style="padding-left: 10%">
    <h1>Welcome to my site</h1><br>
    </div>
    <div style="text-align: center">
    <form  name="form1" onsubmit="return validate()" method = "post" id="form1"  action = "http://127.0.0.1:2906/success" style="padding-top: 2%">
        <label id="user" style="font-size: 20px">Username</label><br>
        <input type="text" name = "ID" placeholder = "Username" style = "padding-left: 0.2%;"><br><br>
        <label style="font-size: 20px">First name</label><br>
        <input type="text" name = "fname" id="fname" placeholder = "First name" style = "padding-left: 0.2%"><br><br>
        <label style="font-size: 20px">Last name</label><br>
        <input type="text" name = "lname" placeholder = "Last name" style = "padding-left: 0.2%"><br><br>
        <label style="font-size: 20px">Password</label><br>
        <input type = "password" name = "Password" placeholder = "Password" style = "padding-left: 0.2%"><br><br><br>
        <input type = "submit"  value = "Sign up" style="width:10%;height: 40px">
    </form>
    </div>

</body>
</html>

＆＃13;

Answer 2

试试这个：

<script type="text/javascript">
        function validate() {


        var fname = document.forms["form1"]["fname"].value;
        var lname = document.forms["form1"]["lname"].value;
        var ID = document.forms["form1"]["ID"].value;
        var Password = document.forms["form1"]["Password"].value;

        if(!fname || !lname || !ID || !Password || fname!='' || lname!='' || ID!='' || Password!='')
        {
            alert("Please enter all the fields");
            return false;
        };
    }

Answer 3

是的，只需检查空字符串即可。例如

if($("#elementId").val()==""){
    alert(" please fill username");
    return false;
}

即使input元素为空，HTML表单也会提交

3 个答案: