2

.load()ナビゲーションリンクをクリックすると、jquery関数を介してすべてのコンテンツをロードする非常に単純なサイトを作成しました。これは非常にうまく機能します。私が今欲しいのは、php送信を実行する前に、無効な入力フィールドについてユーザーに警告するAJAXスタイルの検証を含む電子メール連絡フォームをロードすることです。

つまり、ユーザーが「お問い合わせ」のナビゲーションリンクをクリックすると、フォームがコンテンツdivに読み込まれます。ユーザーが無効な名前または電子メールを入力して送信を押すと、それらの入力フィールドの横に適切なエラーメッセージが表示されます。ポップアップウィンドウであろうとリダイレクトページであろうと、フォームが通過した後に何が起こるかは本当に気にしません。

私はこれを何週間も理解しようとしてきました、そして私はあきらめる準備ができています。フォームは正常に読み込まれますが、ページを再読み込みしてフィールドをクリアしない限り、AJAXが読み込まれたフォームをユーザーに応答させるための基本的な構成を理解できません。phpフォームの送信部分を希望どおりに機能させることもできましたが、クライアント側のスクリプトをサーバー側のphp関数で機能させるのは難しいようです。

これも可能ですか？これについてはどうすればよいですか？このようなものの基本的な概念とツールは何ですか？

4

2 に答える 2

1

あなたの問題は何ですか？単純な jQuery バリデータ プラグインを使用できないのはなぜですか?

いくつかの例：

  1. プラグイン/検証/検証
  2. jQuery プラグイン: 検証
  3. プラグイン/検証
于 2012-11-24T13:46:25.613 に答える
1

jquery 検証プラグインを使用してフォームを機能させました。提案してくれた Praveen に感謝します。それは素晴らしいツールです。

根底にある問題は、.load() に頭を悩ませていなかったことです。.load() コールバック関数を使用すると、検証は正常に実行されました。contactPageScript() 関数内にネストされた検証プラグイン ルールと submitHandler を含む contact.js という外部 JavaScript ファイルを作成しました。.load() コールバックと出来上がりで contactPageScript() を呼び出しました。

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/contact.js"></script>

<script>
  $(document).ready(function(){
    $("div#menu ul li a").click(function() {
      var whichPage = $(this).attr('href');
      $('div#page_content').load(($(this).attr('href') + ' #contentB'), function(){
                    if (whichPage == 'contact.html') {
                        contactPageScript();
                    }}
      );
    });
  });
</script>
</head>

もちろん、検証スクリプトは、外部の .js としてではなく、コールバック関数内にネストされても問題なく機能しましたが、私の好みには長すぎました。また、バリデーション ルールに関しては、いくつかの細かな点を解決する必要がありました。参照用に使用した検証コードのチャンクを次に示します。

$(document).ready(function() {
  $('#mailform').validate( { 
    rules: {
      fullname: {
        required: true,
        minlength:2
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      fullname: 'Please enter a valid name',
      email: 'Please enter a valid email address'
    },
    submitHandler: function(form) {
       $.post('php/submitForm.php', $('#mailform').serialize(), function() { DO STUFF });
    }
  });
});

最初は、デバッグ中にプラグイン スクリプトを動作させることができませんでした。ルールの後の余分なコンマに注意してください! また、一部のコピーパスタ チュートリアルには無効な文字が隠されていることにも注意してください。あなたは決して知らないでしょう！検証するには、コード全体を手作業で書き直さなければなりませんでした。

後でコールバック内にネストされた if/else ステートメントを追加して、jquery/javascript を必要とするサイト上の他のすべてのページの関数を呼び出しました。最初は、ネストされた if/else の代わりにスイッチを使用しようとしましたが、理想的ではありませんでした。説明書が読めて助かります！

乾杯。

于 2012-12-17T15:02:52.573 に答える