1

我在尝试创建允许验证的联系表单之前问过这个问题（未填写或填写不正确时显示错误） - https://stackoverflow.com/questions/16331369/creating-a-contact-form-which -未填写时显示错误

最终功能不必工作（意味着它不必发送，但它仍然可以 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;}
4

5 回答 5

1

error您已多次声明该变量。在此 jsbin中，您已对代码进行了纠正，它运行正常。

编辑1：关于您的评论，我已经更新了代码。现在错误不会在一开始就显示出来。

编辑 2：“因为我正在创建一个模板” ——在这种情况下，我建议你让你的代码更抽象，或者使用一个库来进行表单验证。

于 2013-05-02T07:42:48.240 回答
1

我在我的网站上做了类似的事情进行验证：

  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);
      }
   }
}

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

希望这可以帮助。

于 2013-05-02T07:35:00.243 回答
0

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

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

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

于 2013-05-02T07:43:29.697 回答
0

你试试

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

代替

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

于 2013-05-02T07:33:01.167 回答
0

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

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

于 2013-05-02T07:33:19.633 回答