1

我想在相应字段下方显示错误消息，并在表单下方显示成功消息。我能够获得成功消息，但即使字段为空，我也不会显示错误消息。以下是我的代码：-

联系人.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>

发送.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
}

?>

请帮帮我。我不知道我哪里出错了？

4

6 回答 6

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()" />
于 2013-07-23T11:48:44.933 回答
0

你json_encode在实际设置错误消息之前被调用，其次你没有回显 json_encode 结果

于 2013-07-23T09:53:15.687 回答
0

false每次遇到每个字段的错误时都尝试返回，例如

if( typeof response["email"] != "undefined" ) {
    $("li#email .errorText").html(response["email"]);
    return false;
}

您需要为每个字段执行此操作，也可以检查

if(response["email"] && response["email"].trim() != '')

最好您需要通过 javascript 在页面本身上跟踪验证，验证后您可以转到该页面来处理数据。这是我的建议。

于 2013-07-23T10:02:51.143 回答
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>
于 2013-07-23T13:45:06.097 回答
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

}

希望这可以帮助！

于 2013-07-23T09:59:58.227 回答
-1

你可以试试这个 jQuery 插件：

http://validity.thatscaptaintoyou.com/

于 2013-07-23T11:29:15.757 回答