AJAX Jquery 评论表单响应答案

【问题标题】：AJAX Jquery Comment Form ResponseAJAX Jquery 评论表单响应
【发布时间】：2012-02-27 15:00:35
【问题描述】：

我正在使用 jquery 验证插件创建一个弹出式 jquery ajax 评论表单。为什么 ajax 对评论字段与名称和电子邮件字段的工作方式不同？当用户开始在评论字段中输入时，将删除 ajax 响应“此字段是必需的”。我希望名称和电子邮件字段也能发生这种情况，但它们会一直存在，直到用户单击提交。如何让姓名和电子邮件字段的行为类似于评论字段？

这里是控制事件的js：

  <script>
    $(document).ready(function() {
        $('#commentForm').validate({
            submitHandler: function(form) {
                $.ajax({
                    type: 'POST',
                    url: 'process.php',
                    data: $(this).serialize(),
                    success: function(returnedData) {
                        $('#commentForm').append(returnedData);
                    }
                });         
                return false;
            }
        });
    });
  </script>

html表单配置如下：

<form class="cmxform" id="commentForm" method="POST" action="">
   <p>
     <label for="cname">Name</label>
     <input id="cname" type="text" name="name" size="60" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <input id="cemail" type="text" name="email" size="60"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <input id="curl" type="text" name="url" size="60"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <textarea id="ccomment" type="text" name="comment" cols="72" rows="8"  class="required"></textarea>
   </p>
   <p>
     <div id="button2"><input class="submit" id="submit_btn" type="submit" value="Send Email"/></div>
   </p>
</form>

谢谢。

【问题讨论】：

你能在 JSFiddle 中重现它吗？
出于某种原因，我在 jsfiddle 收到“shell 表单无法验证”错误。在本地主机上效果很好
也许是因为 ajax 引用了一个 php 文件？删除 url:'process.php' 也不允许我发布到 jsfiddle，但是

标签： jquery ajax forms response comments

【解决方案1】：

我通过使用 jQuery 中的 errorPlacement 函数解决了这个问题。没有为这些元素指定 errorPlacement 导致我的 js 发生冲突。

这是我解决问题的方法：

$('#commentForm').validate({
    submitHandler: function(form) {
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: $(this).serialize(),
            success: function(returnedData) {
                $('#commentForm').append(returnedData);
            }

        });
        return false;
    },
    errorPlacement: function(error, element) {
        error.insertAfter(element).position({
            my: 'right top',
            at: 'right top',
            of: element
        });
        error.fadeOut(3000);
    },
});

【讨论】：