1

我有以下html

<form  action="" class="form-horizontal" id="submitForm">
  <input class="required input-xxlarge" type="text" placeholder="Please enter a suitable title" name="title">
  <br><br>
  <div id='container' class="well">
    <br>
    <textarea class="span8 required" id='mytextarea' wrap='on'>
      Please enter some value
    </textarea>
    <br>
    <input class="btn btn-info" type="submit" id="submit-button" value="Submit">
  </div>

</form>

当用户单击提交时，我想将 textarea 数据以及文本数据发送到 url。我也在使用验证插件，只是为了确保客户端验证。

以下是我的 jQuery：

 $(function() {
    $("#submitForm").submit(function(){
        if ($("#submitForm").validate()){
            $.post("/create/post/",
                   {'data':$('#mytextarea').val()},
                   function(data){
                       console.log(data);
                       alert(data);
                   });
        }
    });
    });

截至目前，它似乎不起作用，有什么问题吗？如何覆盖提交按钮，执行验证，然后将数据发布到服务器？

4

2 回答 2

1

validate()只是插件的初始化方法，而不是用来检查表单是否有效的方法。您提供的代码始终“验证”为真，因为validate()返回验证对象。实际检查表单是否有效是valid()目的。

此外，正如德猫所写，您需要停止事件传播，以便使用 ajax 提交表单。一种方法是在回调结束时返回 false。

所以你的代码应该是这样的：

$(function() {
    $("#submitForm").validate();

    $("#submitForm").submit(function(){                       
        if ($("#submitForm").valid()){
            $.post("/create/post/",
                   {'data':$('#mytextarea').val()},
                   function(data){
                       console.log(data);
                       alert(data);
                   });
        }
        return false;
    });
 });​

这是一个演示：http: //jsfiddle.net/hzcF7/

另一种方法是让插件自己进行验证，并在submitHandler初始化验证对象时使用该选项告诉它如果表单有效该怎么做。像这样：

$(function() {
    $("#submitForm").validate({
        submitHandler: function() {
            $.post("/create/post/",
               {'data':$('#mytextarea').val()},
               function(data){
                   console.log(data);
                   alert(data);
               });
        }
    });
 });​​​

演示

于 2012-09-25T16:11:40.340 回答
0

您只需要返回 false 或执行事件停止传播。现在，该函数在启动 AJAX 后继续提交表单的正常过程。你只需要告诉它停止

$(function() {
    $("#submitForm").submit(function(){
        if ($("#submitForm").validate()){
            $.post("/create/post/",
                   {'data':$('#mytextarea').val()},
                   function(data){
                       console.log(data);
                       alert(data);
                   });
        }
        return false;
    });
    });
于 2012-09-25T15:35:24.457 回答