我想在表单下方的相应字段和成功消息下方显示错误消息。我能够获得成功消息，但即使字段是emply我也不会显示错误消息。下面是我的代码： -
contact.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="screen" href="styles.css" >
<script type="text/javascript" src="my.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
$.post("send.php", $("#mycontactform").serialize(), function(response) {
$('#success').html(response);
//$('#success').hide('slow');
});
return false;
});
});
</script>
<script type="text/javascript">
function validateRoleForm() {
var name = document.getElementById('name').value;
if (name == "" || name == null) {
$('#errortext1').html('please enter name.');
return false;
}
else if{
var name = document.getElementById('email').value;
if (name == "" || name == null) {
$('#errortext2').html('please enter email.');
return false;
}
else if{
var name = document.getElementById('message').value;
if (name == "" || name == null) {
$('#errortext3').html('please enter message.');
return false;
}
else {
$('#success').html('Mail sent');
return true;
}
}
</script>
</head>
<body>
<form id="mycontactform" class="contact_form" action="" method="post" name="contact_form">
<ul>
<li>
<h2>Contact Us</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li id="name">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="John Doe" required />
<br><small class="errorText"></small></br>
<div id="errorText1" style="color:red;"> </div>
</li>
<li id="email">
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="john_doe@example.com" required />
<span class="form_hint">Proper format "name@something.com"</span>
<br><small class="errorText"></small></br>
<div id="errorText2" style="color:red;"></div>
</li>
<li id="message">
<label for="message">Message:</label>
<textarea name="message" id="message" cols="40" rows="6" required ></textarea>
<br><small class="errorText"></small></br>
<div id="errorText3" style="color:red;"></div>
</li>
<li>
<input type="button" class="submit" style="width:70px; text-align:center; height:30px; margin-left:200px; cursor:pointer" value="SEND" id="submit" onclick="return validateRoleForm()"/>
</li><div id="success" style="color:red;"></div>
</form>
</body>
</html>
send.php
<?php
// Here we get all the information from the fields sent over by the form.
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = 'babloopuneeth@gmail.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: youremail@domain.com' . "\r\n";
$error = array(
"name" => "",
"email" => "",
"message" => ""
);
json_encode($error);
$email = ( isset( $_POST["email"] ) ) ? trim( $_POST["email"] ) : false;
$name = ( isset( $_POST["name"] ) ) ? trim( $_POST["name"] ) : false;
$message = ( isset( $_POST["message"] ) ) ? trim( $_POST["message"] ) : false;
if ( !$email ) {
$error["email"] = "Email is required!";
}
if ( !$name ) {
$error["name"] = "Name is required!";
}
if ( !$message ) {
$error["message"] = "Message is required!";
}
else { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}
?>
请帮帮我。我不知道我哪里错了？
答案 0 :(得分：0)
在实际设置错误消息之前调用json_encode，其次是不回显json_encode结果
答案 1 :(得分：0)
您没有在脚本中的任何位置回显错误消息。您必须先设置错误消息，然后在验证表单输入后回显它们。
我将这些错误消息存储在一个数组中，然后使用foreach循环将它们显示在列表中。
if ( !$email ) {
$error[] = "Email is required!";
}
if ( !$name ) {
$error[] = "Name is required!";
}
if ( !$message ) {
$error[] = "Message is required!";
}
在您的index.php：
foreach($error as $e) {
echo "<li>$e</li>";
}
另外，我建议将isset放在脚本的顶部。首先在提交按钮中添加name属性：
然后，您可以使用isset()检查表单是否已提交：
if( isset($_POST['mySubmitButton']) ) {
//rest of the code here
}
希望这有帮助！
答案 2 :(得分：0)
每次遇到
等每个字段的错误时，请尝试返回false
if( typeof response["email"] != "undefined" ) {
$("li#email .errorText").html(response["email"]);
return false;
}
您需要为每个字段执行此操作，还可以使用
进行检查if(response["email"] && response["email"].trim() != '')
最好是你需要通过javascript跟踪页面本身的验证，然后验证后你可以转到那个pag来处理数据。这是我的建议。
答案 3 :(得分：0)
<li id="email">
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="john_doe@example.com" required />
<span class="form_hint">Proper format "name@something.com"</span>
<br><small class="errorText"></small></br>
<div id="errorText" style="color:red;"></div>
</li>
change to
<li id="email">
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="john_doe@example.com" required />
<span class="form_hint">Proper format "name@something.com"</span>
<br><small class="errorText"></small></br>
<div id="errorText1" style="color:red;"></div>
</li>
give different id for different fields
ans use simple java script as
<script type="text/javascript">
function validateRoleForm() {
var name = document.getElementById('email').value;
if (name == "" || name == null) {
$('#errortext1').html('please enter email.');
return false;
}
else {
return true;
}
}
</script>
change
<input type="button" class="submit" style="width:70px; text-align:center; height:30px; margin-left:200px; cursor:pointer" value="SEND" id="submit" />
to
<input type="button" class="submit" style="width:70px; text-align:center; height:30px; margin-left:200px; cursor:pointer" id="submit" onclick = "return validateRoleForm()" />
答案 4 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="screen" href="styles.css" >
<script type="text/javascript" src="my.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function validateForm() {
var name = document.getElementById('name').value;
if (name == "" || name == null) {
$('#errortext1').html('please enter name.');
return false;
}
else if{
var email = document.getElementById('email').value;
if (email == "" || email == null) {
$('#errortext2').html('please enter email.');
return false;
}
else if{
var message = document.getElementById('message').value;
if (message == "" || message == null) {
$('#errortext3').html('please enter message.');
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<form id="mycontactform" class="contact_form" action="" method="post" name="contact_form">
<ul>
<li>
<h2>Contact Us</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li id="name">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="John Doe"/>
<br><small class="errorText"></small></br>
<div id="errorText1" style="color:red;"></div>
</li>
<li id="email">
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="john_doe@example.com" required />
<span class="form_hint">Proper format "name@something.com"</span>
<br><small class="errorText"></small></br>
<div id="errorText2" style="color:red;"></div>
</li>
<li id="message">
<label for="message">Message:</label>
<textarea name="message" id="message" cols="40" rows="6" required ></textarea>
<br><small class="errorText"></small></br>
<div id="errorText3" style="color:red;"></div>
</li>
<li>
<input type="button" class="submit" id="submit" onclick="return validateForm()"/>
</form>
</body>
</html>
答案 5 :(得分：-1)
您可以尝试使用此jQuery插件：