16

フォームの ajax 送信を処理するために、JQuery フォーム プラグイン ( http://malsup.com/jquery/form/ ) を使用しています。また、クライアント側の検証用にJQuery.Validate ( http://docs.jquery.com/Plugins/Validation ) をプラグインしています。

私が見ているのは、期待どおりに検証が失敗することですが、フォームの送信は停止しません。従来のフォーム (つまり、非 ajax) を使用していたとき、検証の失敗により、フォームの送信がまったく妨げられました....これは私の望ましい動作です。

ajax送信が発生した後も検証メッセージが表示されるため、検証が正しく接続されていることがわかります。

それで、私が見逃しているのは、私の望ましい行動を妨げているのですか? 以下のサンプルコード....

<form id="searchForm" method="post" action="/User/GetDetails">
        <input id="username" name="username" type="text" value="user.name" />  
        <input id="submit" name="submit" type="submit" value="Search" />   
</form>
<div id="detailsView">
</div>  

<script type="text/javascript">
    var options = {
        target: '#detailsView'
    };
    $('#searchForm').ajaxForm(options);

    $('#searchForm').validate({
    rules: {
    username: {required:true}},
    messages: {
    username: {required:"Username is a required field."}}
    });
</script>
4

7 に答える 7

15

ajaxForm() を初期化するときに beforeSubmit イベントで使用するコールバック関数を追加する必要があります。

var options = {
        beforeSubmit: function() {
            return $('#searchForm').validate().form();
        },
        target: '#detailsView'
    };

これで、ページを送信する前に検証の結果を確認する必要があることがわかりました。

于 2009-05-10T02:51:17.710 に答える
4

...久しぶりなので、状況が少し変わりました。現在、Validate（）プラグインにsubmitHandlerオプションが渡されています。そのハンドラーでは、手動でajaxSubmitを使用します。私が推測する答えよりも回避策です。お役に立てば幸いです。

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

var v = jQuery("#form").validate({
    submitHandler: function(form) {
        jQuery(form).ajaxSubmit({target: "#result"});
    }
});
于 2010-01-15T07:05:46.633 に答える
2 
$('#contactform').ajaxForm({
  success : FormSendResponse, 
  beforeSubmit:  function(){
    return $("#contactform").valid();
  }
});


$("#contactform").validate();

上記のコードは私にとってはうまくいきました。

于 2012-07-01T13:25:13.870 に答える
1

わかりました、これは古い質問ですが、後世のためにここに解決策を掲載します。私は個人的にこれをハックトロシティに分類しますが、少なくともハクタクマンジャロではありません

<script type="text/javascript">
    var options = {
        target: '#detailsView'
    };

// -- "solution" --
$('#searchForm').submit(function(event) {
  this.preventDefault(event); // our env actually monkey patches preventDefault
                              // impl your own prevent default here
                              // basically the idea is to bind a prevent default
                              // stopper on the form's submit event
});
// -- end --

    $('#searchForm').ajaxForm(options);

    $('#searchForm').validate({
      rules: {
      username: {required:true}},
      messages: {
      username: {required:"Username is a required field."}}
    });
</script>
于 2011-02-15T17:42:25.597 に答える
1

また、すべての入力フィールドに「name」属性と「id」属性があることを確認してください。これらがないと、jquery 検証プラグインが正しく機能しないことに気付きました。

于 2009-06-16T01:25:48.420 に答える
1

最初のパスとして、なぜ行が

$("form").validate({

$("searchform") を参照しません。私はこれを調べたり試したりしていませんが、それは単に不一致のようです. 適切なフォームで validate を呼び出したくありませんか?

とにかく、これが完全に間違っている場合、エラーはすぐにはわかりません。:)

于 2008-09-26T05:14:28.267 に答える
0

false が返される場合があります。フォームに役立ちますか？：） つまり：

<form id="searchForm" method="post" action="/User/GetDetails" onSubmit="return false;">
于 2008-09-26T12:58:54.350 に答える