创建一个未填写时显示错误的联系表单？ （验证）

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：“因为我正在创建这个模板”——在这种情况下，我建议你让代码更抽象，或者使用库进行表单验证。

Answer 2

在HTML5中为必填字段添加了一个关键字：

<input type="text" name="username" required>

但是，这不会是跨浏览器的，因此在这种情况下，最好的方法可能是 jquery 插件。

Answer 3

我在我的网站上做了类似的验证：

1. 将要检查的元素的 ID 重命名为“1”、“2”、“3”等。
2. 将要显示的错误消息的 ID 重命名为“1a”、“2a”、“3a”等。

然后我做了这样的事情：

function validate()
{
   for(i = 1; i< totalelements; i++)
   {
      if(document.getElementById(i).length >= 0 )
      {
         $("#" + i + "a").fadeIn(500);
      }

      else
      {
         $("#" + i + "a").fadeOut(500);
      }
   }
}

现在你唯一要做的就是在某处分配功能（在按钮上，上/下等）

希望这会有所帮助。

Answer 4

使用这个 jQuery 验证插件 - http://docs.jquery.com/Plugins/validation

这是一个非常强大的验证插件。只需 10 秒即可将其应用于您的联系表格。这也是我最喜欢的。

Answer 5

你试试

input type='button' id='send_message' class="button" value='Submit' />

而不是

input type='submit' id='send_message' class="button" value='Submit' />