php - 创建一个在未填写时显示错误的联系表格？ (验证)

Question

我之前问过这个问题，关于尝试创建一个允许验证的联系表单(未填写或填写不正确时显示错误)- https://stackoverflow.com/questions/16331369/creating-a-contact-form-which-displays-error-when-not-filled-in

结束函数不必工作(这意味着它不必发送，但它仍然可以 100% 工作)因为我正在为此创建一个模板，但我确实想要验证和如果填写不正确会出现消息。请看看我做错了什么，在此先感谢。

我的 HTML 代码:

<div class="hr dotted clearfix">&nbsp;</div>
            <!-- Contact Form -->
            <form action='index.html' method='post' id='contact_form'>
                    <h3>Contact Form</h3>
                <div class="hr dotted clearfix">&nbsp;</div>
                <ul>                        
                    <li class="clearfix"> 
                        <label for="name">Name</label>
                        <input type='text' name='name' id='name' />
                        <div class="clear"></div>
                        <p id='name_error' class='error'>Insert a Name</p>
                    </li> 
                    <li class="clearfix"> 
                        <label for="email">Email Address</label>
                        <input type='text' name='email' id='email' />
                        <div class="clear"></div>
                        <p id='email_error' class='error'>Enter a valid email address</p>
                    </li> 
                    <li class="clearfix"> 
                        <label for="subject">Subject</label>
                        <input type='text' name='subject' id='subject' />
                        <div class="clear"></div>
                        <p id='subject_error' class='error'>Enter a message subject</p>
                    </li> 
                    <li class="clearfix"> 
                        <label for="message">Message</label>
                        <textarea name='message' id='message' rows="30" cols="30"></textarea>
                        <div class="clear"></div>
                        <p id='message_error' class='error'>Enter a message</p>
                    </li> 
                    <li class="clearfix"> 

                    <p id='mail_success' class='success'>Thank you. I'll get back to you as soon as possible.</p>
                    <p id='mail_fail' class='error'>Sorry, an error has occured. Please try again later.</p>
                    <div id="button">
                    <input type='submit' id='send_message' class="button" value='Submit' />
                    </div>
                    </li> 
                </ul> 
            </form>  
        </div>

这是我的 javascript 代码:

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


                e.preventDefault();

                var error = false;
                var name = $('#name').val();
                var email = $('#email').val();
                var subject = $('#subject').val();
                var message = $('#message').val();


                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;
                    $('#subject_error').fadeIn(500);
                }else{
                    $('#subject_error').fadeOut(500);
                }
                if(message.length == 0){
                    var error = true;
                    $('#message_error').fadeIn(500);
                }else{
                    $('#message_error').fadeOut(500);
                }


                if(error == false){

                    $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });


                    $.post("send_email.php", $("#contact_form").serialize(),function(result){

                        if(result == 'sent'){

                             $('#button').remove();

                            $('#mail_success').fadeIn(500);
                        }else{

                            $('#mail_fail').fadeIn(500);

                            $('#send_message').removeAttr('disabled').attr('value', 'Submit');
                        }
                    });
                }
            });    
        });

和部分CSS:

p.error                             {margin-left:140px; margin-top:10px;}
    #contact_form ul                    {float:left;}
    #contact_form ul li                 {margin:10px 0; list-style:none; position:relative; clear:both;}
    #contact_form label                 {line-height:35px; width:100px; text-align:right; float:left; margin-right:10px;}
    #contact_form input#name,
    #contact_form input#email,
    #contact_form input#subject,
    #contact_form textarea              {float:left; padding:8px; border:1px solid #CCCCCC; margin-left:10px; background:#fcfcfc; -moz-border-radius:5px; -webkit-border-radius:5px;}
    #contact_form input#name,
    #contact_form input#email,
    #contact_form input#subject         {width:400px;}
    #contact_form textarea              {width:500px;height:150px; resize: none;}
    #contact_form input.button          {float:right;}

Answer 1

您多次声明了变量 error。在 this jsbin您已纠正代码，它运行正常。

编辑 1:关于您的评论，我 updated代码。现在错误不会在开头显示。

编辑 2:“因为我正在为此创建模板” — 在这种情况下，我建议您使代码更抽象，或者使用库进行表单验证。