表格挂在验证上

时间:2013-09-02 03:05:38

标签: php forms validation

我有一个挂在第三个字段上的表单,这意味着如果留空(网站),第三个字段不会触发任何验证。因为我无法通过这个,我不确定该表格是否会发送电子邮件(所以我可能有两个问题)。任何帮助将非常感谢。

更新

验证问题已由Asfer解决,任何提供不发送电子邮件的形式的帮助都会很棒,提前感谢。

更新

HTML contact.html

<style>
#send_message { 
    width:200px !important; 
    font-variant: small-caps; 
    border:none;
    cursor:pointer;
    background:#3399FF;
    color:#FFFFFF;
} 
.error { 
    display: none; 
    width: 200px;
    border: solid 1px;
    padding:5px; 
    margin:0 0 5px 0;
    color: #D8000C; 
    font-size:12px;
    background-color: #FFBABA;
}
.success { 
    display: none; 
    width: 200px;
    border: solid 1px;
    padding:5px; 
    color: #044406; 
    font-size:12px;
    background-color: #B7FBB9;
}
</style>

<form class="form-horizontal" name="contactForm" id='contact_form' method="post" action='email.php'>
    <!-- Name -->
    <div class="control-group">
        <label class="control-label" for="name">Full Name</label>
        <div class="controls">
            <div id='name_error' class='error'>Please enter your full name</div>
            <input type="text" class="input-medium" id="name">
        </div>
    </div>
    <!-- Email -->
    <div class="control-group">
        <label class="control-label" for="email">Email</label>
        <div class="controls">
            <div id='email_error' class='error'>Please enter a valid email address</div>
            <input type="text" class="input-medium" id="email">
        </div>
    </div>
    <!-- Website -->
    <div class="control-group">
        <label class="control-label" for="website">Website</label>
        <div class="controls">
            <div id='website_error' class='error'>Please enter your website address</div>
            <input type="text" class="input-medium" id="website">
        </div>
    </div>
    <!-- Message -->
    <div class="control-group">
        <label class="control-label" for="message">Enquiry</label>
        <div class="controls">
            <div id='message_error' class='error'>Please enter your message</div>
            <textarea class="input-medium" id="message" rows="6"></textarea>
        </div>
    </div>
    <!-- Buttons -->
    <div class="form-actions">
        <!-- Buttons -->
        <div id='mail_success' class='success'>Your message has been sent successfully</div>
        <div id='mail_fail' class='error'>Sorry, an error has occurred</div>
        <button id='send_message' type="submit" class="btn">Submit</button>
    </div>
</form>

确认validation.js

$(document).ready(function(){
    $('#send_message').click(function(e){

        //Stop form submission & check the validation
        e.preventDefault();

        // Variable declaration
        var error = false;
        var name = $('#name').val();
        var email = $('#email').val();
        var website = $('#website').val();
        var message = $('#message').val();

        // Form field validation
        if(name.length == 0){
            var error = true;
            $('#name_error').fadeIn(500);
        }else{
            $('#name_error').fadeOut(500);
        }
        if(email.length == 0 || email.indexOf('@') == '-1'){
            var error = true;
            $('#email_error').fadeIn(500);
        }else{
            $('#email_error').fadeOut(500);
        }
        if(subject.length == 0){
            var error = true;
            $('#website_error').fadeIn(500);
        }else{
            $('#website_error').fadeOut(500);
        }
        if(message.length == 0){
            var error = true;
            $('#message_error').fadeIn(500);
        }else{
            $('#message_error').fadeOut(500);
        }

        // If there is no validation error, next to process the mail function
        if(error == false){
           // Disable submit button just after the form processed 1st time successfully.
            $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });

            /* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/
            $.post("email.php", $("#contact_form").serialize(),function(result){
                //Check the result set from email.php file.
                if(result == 'sent'){
                    //If the email is sent successfully, remove the submit button
                     $('#submit').remove();
                    //Display the success message
                    $('#mail_success').fadeIn(500);
                }else{
                    //Display the error message
                    $('#mail_fail').fadeIn(500);
                    // Enable the submit button again
                    $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
                }
            });
        }
    });    
});

发送邮件email.php

<?php
$to = 'support@example.com';  // Send to
$subject = 'example.com Contact Form'; // Subject of your email

$message .= 'Name: ' . $_REQUEST['name'] . "<br>";
$message .= 'Website: ' . $_REQUEST['website'] . "<br>";
$message .= 'Message: ' $_REQUEST['message'];

$headers .= "From: " . $_REQUEST['email'] . "\r\n"; // Sender's E-mail

if (@mail($to, $subject, $message, $headers))
{
    // Transfer the value 'sent' to ajax function for showing success message.
    echo 'sent';
}
else
{
    // Transfer the value 'failed' to ajax function for showing error message.
    echo 'failed';
}
?>

3 个答案:

答案 0 :(得分:2)

检查这些行

  1. var website = $('#website').val();

  2. if(subject.length == 0){

  3. 我认为主题应该是网站

答案 1 :(得分:0)

如果(subject.length == 0){

,则会出现错误

按网站替换主题,如if(website.length == 0){

if(name.length == 0){
    var error = true;
    $('#name_error').fadeIn(500);
}else{
    $('#name_error').fadeOut(500);
}
if(email.length == 0 || email.indexOf('@') == '-1'){
    var error = true;
    $('#email_error').fadeIn(500);
}else{
    $('#email_error').fadeOut(500);
}

if(subject.length == 0){   //remove this line

if(website.length == 0){   //add this line

    var error = true;
    $('#website_error').fadeIn(500);
}else{
    $('#website_error').fadeOut(500);
}


if(subject.length == 0){
    var error = true;
    $('#website_error').fadeIn(500);
}else{
    $('#website_error').fadeOut(500);
}
if(message.length == 0){
    var error = true;
    $('#message_error').fadeIn(500);
}else{
    $('#message_error').fadeOut(500);
}

答案 2 :(得分:0)

一些事情:

1)在email.php中

$message .= 'Message: ' $_REQUEST['message'];

应该是

$message .= 'Message: ' . $_REQUEST['message'];

2)删除email.php中第一个分配行的。= ,以避免不必要的通知。 即:

$message = 'Name: ' . $_REQUEST['name'] . "<br>";

$headers = "From: " . $_REQUEST['email'] . "\r\n"; // Sender's E-mail

3)如果要发送HTML电子邮件,则需要添加一些额外的标题。请参阅mail中的示例#4。

4)除此之外,请为所有表单字段指定名称属性。

<input type="text" class="input-medium" id="name" name="name">
<input type="text" class="input-medium" id="email" name="email">
<input type="text" class="input-medium" id="website" name="website">
<textarea class="input-medium" id="message" rows="6" name="message"></textarea>

5)如果您尝试在运行Windows操作系统的计算机上发送此文件,则可能无法运行任何邮件服务器。这将导致mail()函数失败。