Question

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

Answer 1

问题是当你使用onsubmit时，你的代码在提交之前不会调用你的函数。处理用户提交所需输入空白的表单的一种方法是使用required元素：

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

https://jsfiddle.net/d43rLno5/

Answer 2

onSubmit在您提交表单时发生，据我所知，以便在您需要使用onclick和onkeyup for enter key来包含关键事件之前将其激活

Trigger a button click with JavaScript on the Enter key in a text box

Form 'onsubmit' not getting called

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

您可以使用

停止默认事件

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

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

HTML表单检查空字段

2 个答案: