Question

我有以下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数据以及文本数据发送到网址。我也在使用validation plugin，以确保客户端验证。

以下是我的jQuery：

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

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

Answer 1

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

此外，作为Demao wrote，您需要停止事件传播，以便使用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);
               });
        }
    });
 });

Demo

Answer 2

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

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

使用带有textarea和验证的jQuery提交html表单

2 个答案: