Javascript HTML表单检查空字段_Javascript_Html_Css_Forms_Validation

Javascript HTML表单检查空字段

javascript html css forms validation

Javascript HTML表单检查空字段,javascript,html,css,forms,validation,Javascript,Html,Css,Forms,Validation,我已经在HTML表单中实现了输入验证。但是，如果出现任何错误，它不会提示用户，而是继续将其数据发送到测试服务器下面是我的代码： <html> <head> <style> input {margin: 10px 5px 10px 5px;} select {margin: 10px 5px 10px 5px;} </style> <script language="JavaScript

我已经在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>


输入{边距：10px 5px 10px 5px；}
选择{margin:10px 5px 10px 5px；}
函数验证（form1）
{if（form1.name.value==“”| | form1.姓氏.value==“”| | form1.email.value==“”| | form1.dob.value==“”）
{警报（“其中一个字段为空。”）
form1.firstname.focus（）
form1.firstname.select（）
form1.lastname.focus（）
form1.lastname.select（）
form1.email.focus（）格式
form1.email.select（）
表格1.dob.focus（）
form1.dob.select（）
返回错误
}
返回真值}
名字

姓氏

电子邮件地址

出生日期

喜爱的运动


田径运动

篮球

板球

足球

曲棍球

游泳

网球

据我所知，提交表单时会发生onSubmit，以便在需要使用onclick和onkeyup作为enter key来包含key事件之前启动表单

否则，如果不希望立即调用表单操作，则需要停止默认事件的发生

您可以使用以下命令停止默认事件：

if (event.preventDefault) {
    event.preventDefault(); 
} else { 
    event.returnValue = false; 
}

然后，您可以使用jquery.post方法将Ajax查询发送到脚本

问题是，当您使用onsubmit时，您的代码在提交之前不会调用您的函数。处理用户提交带有必填输入空白的表单的一种方法是使用

required

元素：

<form>
First Name<input type="text" name="firstname" required><br>
<input type="Submit"> <input type="reset">
</form>


名字

什么是form1.name？只需在输入字段中包含required，即可验证空文本框。