javascript - 使用带有文本区域和验证的 jQuery 提交 html 表单

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>

当用户单击提交时，我想将文本区域数据以及文本数据发送到网址。我也在使用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