【发布时间】：2014-04-20 05:00:14
【问题描述】：
我正在尝试使用 JavaScript 验证表单。当输入字段为空时，它会打印错误消息。我遇到的问题是代码在提交时没有触发。
这里是 HTML 代码：
<head>
...
<script type="text/javascript" src="./js/validate.js"></script>
....
</head>
...
<form name="submitForm" method="post" id="submitBetaForm" onsubmit="return(validate())" action="validate.php" class="form-style">
<label for="email">Email:</label>
<input type="text" id="email-beta" name="email" placeholder="Enter Email"/>
<label for="firstName">Name:</label>
<input type="text" id="firstName" class="half-width" name="messageName" placeholder="First name"/>
...
这是 JavaScript 代码：
function validate()
{
var email = document.submitForm.email;
var first = document.submitForm.firstName;
var last = document.submitForm.lastName;
var message = document.getElementById('warning');
message.innerHTML = 'This is working!';
var newLineCharNum = 0, poemContentArray = 0;
//check to make sure that there is actually new line in the
//text area. Ensure that code doesn't blow up.
if(textarea.value.match(/\n/g) != null)
{
newLineCharNum = textarea.value.match(/\n/g).length;
poemContentArray = textarea.value.split("\n");
}
//check for email, firstName, lastName
//focus puts the cursor on the element that needs to be corrected.
var lineNum = newLineCharNum + 1;
// if(email.value.length > 30)
// {
// message.innerHTML = 'Email should be less than 30 character';
// title.focus();
// return false;
// }
else if(email.value.length == 0 || title == "")
{
message.innerHTML = 'Please enter your email';
title.focus();
return false;
}
if (firstName.value.length > 30)
{
message.innerHTML = 'First name should be less than 30 character';
authorName.focus();
return false;
}
else if(firstName.value.length == 0 ||authorName == "")
{
message.innerHTML = 'Please enter your first name';
authorName.focus();
return false;
}
if (lastName.value.length > 30)
{
message.innerHTML = 'Last name should be less than 30 character';
authorName.focus();
return false;
}
else if(lastName.value.length == 0 ||authorName == "")
{
message.innerHTML = 'Please enter your last name';
authorName.focus();
return false;
}
}
这里是 PHP：
<?php
session_start();
include('connection.php');
if(isset($_POST['SEND'])){
//get information from the form
$email = $_POST['email'];
$first_name = $_POST['messageName'];
$last_name = $_POST['messageLast'];
$interest = $_POST['interest'];
$country = $_POST['country'];
// Check connection
if ($con)
{
$insert_query = "INSERT INTO `user` (`id`, `first_name`, `last_name`, `interest`, `country`, `time`, `email`)
VALUES (NULL, '$first_name', '$last_name', '$interest', '$country', CURRENT_TIMESTAMP, '$email')";
$con->query($insert_query);
$con->close();
echo "here";
}
else{
echo "ERROR!";
}
//store informationn in the sessiont for later use
$_SESSION['email'] = $email;
$_SESSION['first_name'] = $first_name;
$_SESSION['last_name'] = $last_name;
$_SESSION['interest'] = $interest;
$_SESSION['country'] = $country;
}
?>
【问题讨论】：
-
创建一个小提琴将使这个问题更容易回答。我知道这并不能直接回答您的问题，但您尝试执行的验证可以使用 HTML 属性
maxlength和required来处理。您可能有不能使用这些属性的原因，但如果不是，则可能需要考虑。 -
只是想一想，如何提交表单？如果你使用 form.submit();然后不调用 onsubmit 处理程序。您必须使用提交按钮并点击它！
-
@garethdn 感谢您的回复，这里是小提琴jsfiddle.net/LHaav
-
如果代码在提交时没有触发，这意味着您的表单无论如何都会被提交，而不管验证应该阻止提交还是在任何情况下都没有提交表单？
-
@leandroico 有道理，但即使注释掉 action="validate.php" （将数据发送到数据库），当输入字段为空时，我仍然没有显示错误消息
标签： javascript jquery html forms validation