HTML表单检查空白字段

gym*_*ode 2 html javascript css forms validation

我已经在HTML表单中实现了输入验证。但是,它不会在出现任何错误时提示用户,并且仍会继续将其数据发送到测试服务器。

下面是我的代码:

<html>
<head>
    <style>
        input {margin: 10px 5px 10px 5px;}
        select {margin: 10px 5px 10px 5px;}
    </style>
    <script language="JavaScript">
    function validate(form1)
    { if (form1.name.value == "" || form1.surname.value == "" || form1.email.value == "" || form1.dob.value == "")
        { alert("One of the field is empty.")
            form1.firstname.focus()
            form1.firstname.select()
            form1.lastname.focus()
            form1.lastname.select()
            form1.email.focus()
            form1.email.select()
            form1.dob.focus()
            form1.dob.select()

            return false
        }
    return true}
    </script>

</head>
<body>
    <form method="GET" action="http://www.test/cgi-bin/reply.pl"
    onSubmit="return validate(this)">
        First Name<input type="text" name="firstname"><br>
        Last Name<input type="text" name="lastname"><br>
        Email Address<input type="email" name="email"><br>
        Date of Birth<input type="date" name="dob"><br>
        Favourite Sport
        <select name="sports"><br>
        <option value="athletics">Athletics</option><br>
        <option value="basketball">Basketball</option><br>
        <option value="cricket">Cricket</option><br>
        <option value="football">Football</option><br>
        <option value="hockey">Hockey</option><br>
        <option value="swimming">Swimming</option><br>
        <option value="tennis">Tennis</option><br>
        </select><br>
        <input type="Submit"> <input type="reset">
    </form>

</body>

</html>
Run Code Online (Sandbox Code Playgroud)

小智 5

问题是,当您使用onsubmit时,您的代码要等到提交后才能调用您的函数。处理用户提交带有必需输入空白的表单的一种方法是使用required元素:

<form>
First Name<input type="text" name="firstname" required><br>
<input type="Submit"> <input type="reset">
</form>
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/d43rLno5/