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>

ユーザーが[送信]をクリックしたときに、テキストエリアデータとテキストデータを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()は、検証オブジェクトを返すため、常にtrueに「検証」されます。フォームが有効かどうかを確認するための実際のチェックvalid()は、目的です。

さらに、Demaoが書いたように、フォームがajaxで送信されるように、イベントの伝播を停止する必要があります。1つの方法は、コールバックの最後に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 に答える