我的问题是，我希望我的 表单 在 php将其发送到我的电子邮件之前在js 中进行验证>。多数民众赞成没有发生。即使是空白字段，也会发送表单。
问题是，验证对 表单 <中的php action类型次要有点< / strong> tag。
换句话说：action="contact-engine.php"位于onsubmit="return validateForm()"之前。
现在，如果我从表单标签中删除action="contact-engine.php"，js代码就可以正常工作了，但那不是我想要的......
所以这是HTML：
<form name="myForm" method="POST" onsubmit="return validateForm(myForm)" action="contact-engine.php">
<label for="Name" id="name">1. Name:</label>
<input type="text" name="Name" id="Name">
<label for="Email" id="email">2. E-mail:</label>
<input type="text" name="Email" id="Email">
<label for="Message" id="messg">3. Message:</label>
<textarea name="Message" rows="20" cols="20" id="Message"></textarea>
<input type="submit" name="submit" value="Send" class="submit-button">
JS：
function validateForm(myForm) {
var x = document.forms["myForm"]["Name"].value;
var y = document.forms["myForm"]["Email"].value;
var z = document.forms["myForm"]["Message"].value;
if ((x == null || x == "")&&(y == null || y == "")&&(z == null || z == "")) {
document.getElementById("name").style.color = "#ff0000";
document.getElementById("email").style.color = "#ff0000";
document.getElementById("messg").style.color = "#ff0000";
return false;
}else if ((y == null || y == "")) {
document.getElementById("email").style.color = "#ff0000";
document.getElementById("name").style.color = "#111111";
document.getElementById("messg").style.color = "#111111";
return false;
}else if ((z == null || z == "")) {
document.getElementById("messg").style.color = "#ff0000";
document.getElementById("email").style.color = "#111111";
document.getElementById("name").style.color = "#111111";
return false;
}else {
return true;
}
和PHP：
<?php
$EmailFrom = "whatever@o2.pl";
$EmailTo = "wherever@yahoo.com";
$Subject = "Message from";
$Name = Trim(stripslashes($_POST['Name']));
$Email = Trim(stripslashes($_POST['Email']));
$Message = Trim(stripslashes($_POST['Message']));
// validation
$validationOK=true;
if (!$validationOK) {
print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
exit;
}
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
// redirect to success page
if ($success){
print "<meta http-equiv=\"refresh\" content=\"0;URL=../thanks.php\">";
}
//else{
//print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
//}
?>
因为你可以肯定地看到我错过了PHP和JS之间的联系，但是我在哪里以及如何以及无所不知。
提交表单时，它只运行PHP并显示成功网站。
那么我该如何防止这种情况发生呢？
先谢谢你们。
答案 0 :(得分：1)
Data form validation将是一种更好的方法来解决这个问题。请注意required attribute，如果尚未填充字段，则会阻止提交表单。
<form name="myForm" method="POST" action="contact-engine.php">
<label for="Name" id="name">1. Name:</label>
<input type="text" name="Name" id="Name" required>
<label for="Email" id="email">2. E-mail:</label>
<input type="text" name="Email" id="Email" required>
<label for="Message" id="messg">3. Message:</label>
<textarea name="Message" rows="20" cols="20" id="Message" required></textarea>
<input type="submit" name="submit" value="Send" class="submit-button">
</form>
答案 1 :(得分：1)
您需要将this传递给validateForm函数。
以下是验证输入不是test的简短示例。
的index.html：
<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="http://google.com" onsubmit="return handleSubmit(this);">
<input id="q" name="q" type="text" />
<input type="submit" />
</form>
</body>
</html>
validate.js：
function handleSubmit(form) {
var q = form.querySelector("#q");
return q.value !== "test";
}
答案 2 :(得分：0)
<form name="myForm" method="POST" action="contact-engine.php">
<label for="Name" id="name">1. Name:</label>
<input type="text" onblur="validateForm()" name="Name" id="Name" required>
<label for="Email" id="email">2. E-mail:</label>
<input type="text" onblur="validateForm()" name="Email" id="Email" required>
<label for="Message" id="messg">3. Message:</label>
<textarea name="Message" onblur="validateForm()" rows="20" cols="20" id="Message" required></textarea>
<input type="submit" disabled="true" id="subm" name="submit" value="Send" class="submit-button">
</form>
<script>
function validateForm() {
var x = document.getElementById("Name").value;
var y = document.getElementById("Email").value;
var z = document.getElementById("Message").value;
var passed = true;
if ((x == null || x == "") { document.getElementById("name").style.color = "#ff0000"; passed = false; } else { document.getElementById("name").style.color = "#111111"; }
if ((y == null || y == "")) { document.getElementById("email").style.color = "#ff0000"; passed = false; } else { document.getElementById("email").style.color = "#111111"; }
if ((z == null || z == "")) { document.getElementById("messg").style.color = "#ff0000"; passed = false; } else { document.getElementById("messg").style.color = "#111111"; }
if (passed) {
document.getElementById("subm").disabled = false;
} else {
document.getElementById("subm").disabled = true;
}
}
</script>
答案 3 :(得分：0)
我不是说不使用JS，对于错误样式，您可以CSS验证您的输入。
查看此示例以验证必填字段。
input:invalid,
textarea:invalid {
border-color: red !important;
}
form {
padding: 20px;
max-width: 500px;
margin: 0 auto;
}
form div {
padding: 5px;
}
label {
display: block;
}
input + label {
display: inline-block;
margin-right: 10px;
}
input[type=text],
input[type=email],
textarea {
border: 1px solid #999;
padding: 5px;
width: 100%;
}<form>
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email" required />
</div>
<div>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" required />
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" required />
<label for="radio-choice-2">Choice 2</label>
</div>
<div>
<label for="textarea">Comment</label>
<textarea cols="40" rows="8" name="textarea" id="textarea" required></textarea>
</div>
<div class="buttons">
<input type="submit" value="Submit" />
</div>
</form>