在字段下方显示错误消息

时间:2013-07-23 07:59:57

标签: php jquery html

我想在联系表单中的字段下方显示错误消息。但我不能这样做。这是我的代码: -

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(){

$.post("send.php", $("#mycontactform").serialize(),  function(response) {   
 $('#success').html(response);
 //$('#success').hide('slow');
});
return false;


});

});


</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>
            <label for="name">Name:</label>
            <input type="text"  id="name"  name="name" placeholder="John Doe" required />
            <small class="errorText"><?php echo $error["name"]; ?></small>
        </li>
        <li>
            <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>
            <small class="errorText"><?php echo $error["email"]; ?></small>
        </li>

        <li>
            <label for="message">Message:</label>
            <textarea name="message" id="message"  cols="40" rows="6" required ></textarea>
            <small class="errorText"><?php echo $error["message"]; ?></small>
        </li>
<li>
            <input type="button"  class="submit" style="width:70px; text-align:center; height:30px; margin-left:200px; cursor:pointer"  value="SEND" id="submit" />


        </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" =>  ""
  );

  $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 ( !$emai ) {
    $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
}
?>  

我尝试了许多其他方法,但它不起作用。我只是想在每个字段下方显示错误消息,如果该字段为空,Plz帮助我..

3 个答案:

答案 0 :(得分:0)

在每次输入后使用<br>

答案 1 :(得分:0)

$.posthttp://api.jquery.com/jQuery.post/

这是jquery AJAX。因此,您无法在表单页面上显示<?php echo $error["name"]; ?>的返回消息。您必须使用javascript来显示错误消息。

答案 2 :(得分:0)

您应该使用jQuery AJAX来检索服务器端验证。 Here is the material

仅供参考,使用jQuery验证来验证表单会更好。查看here以获得简明扼要的示例。您可以根据您的情况调整代码。

相关问题