0

jQuery を使用して検証し、次に AJAX を使用して 1 つのページで複数のフォームを送信しています。ユーザーは、訪問ごとに 1 つのフォームのみを入力します。現在、jQuery は最初のフォームを対象として検証することしかできず、他のフォームの存在を処理するためにそれを適応させる方法がわかりません。スクリプトは、うまく機能する 1 つのフォーム環境から取得されました。これを行うことができるというさまざまな投稿を見てきましたが、それらを自分の状況に適用する方法がわかりませんでした.

<script type="text/javascript">
function validateEmail(email) { 
    var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return reg.test(email);
}

$(document).ready(function() {
     $("#contact").submit(function() { return false; });    

     $('a').click(function(e) {
         $('#product').val($(this).attr('id'));     
         $('#sub').val('I am interested in ' + this.id);    
     });        

     $("#send").on("click", function(){
        var emailval  = $("#email").val();
        var msgval    = $("#msg").val();
        var msglen    = msgval.length;
        var mailvalid = validateEmail(emailval);
        var nameval    = $("#name").val();
        var namelen    = nameval.length;

        if(mailvalid == false) {
            $("#email").addClass("error");
        }
        else if(mailvalid == true){
            $("#email").removeClass("error");
        }

        if(msglen < 4) {
            $("#msg").addClass("error");
        }
        else if(msglen >= 4){
            $("#msg").removeClass("error");
        }

        if(namelen < 1) {
            $("#name").addClass("error");
        }
        else if(namelen >= 1){
            $("#name").removeClass("error");
        }

        if(mailvalid == true && msglen >= 4 && namelen >= 1) {
            // if both validate we attempt to send the e-mail
            // first we hide the submit btn so the user doesnt click twice
            $("#send").replaceWith("<span class=sending>sending...</span>");

            $.ajax({
                type: 'POST',
                url: 'rfq.php',
                data: $("#contact").serialize(),
                success: function(data) {
                    if(data == "true") {
                        $("#contact").fadeOut("fast", function(){
                            $(this).before("<span class=success>Success! Your message has been sent.</span>");
                            setTimeout("$.fancybox.close()", 5000);
                        });
                    }
                }
            });
        }
    });
});
4

1 に答える 1

0

これを行う方法のいくつかのアイデアを次に示します。フォームダンパーを接続してすべてをテストしたり、fancybox を実行してそれに付随するすべての html を作成したりする時間がないため、完成しませんでした。

これは、すべて名前、電子メール、およびメッセージ フィールドを持つクラス「連絡先」を持つ複数のフォームを処理する必要がある汎用ハンドラーです。

変更する必要があるセレクターの一部。たとえば、フォームごとに送信スパンが必要かどうかわからないので、フォームの兄弟であると仮定しました。

    $(".contact").submit(function() { 
        var form = $(this);
        var name  = form.find("input[name='fullname']");
        var email = form.find("input[name='email']");
        var msg   = form.find("input[name='msg']")

        var emailval  = email.val();
        var msgval    = msg.val();
        var msglen    = msgval.length;
        var mailvalid = validateEmail(emailval);
        var nameval    = name.val();
        var namelen    = nameval.length;

        name.toggleClass("error",namelen < 1) 
        email.toggleClass("error",!mailvalid);
        msg.toggleClass("error",msglen< 4) 

        if (name.hasClass("error") || email.hasClass("error") || msg.hasClasss("error")) return false;

        form.sibling(".send").replaceWith("<span class=sending>sending...</span>");

        $.ajax({
          type: 'POST',
          url: 'rfq.php',
          data: form.serialize(),
          success: function(data) {
            if(data == "true") {
              $(form).fadeOut("fast", function(){
                $(this).before("<span class=success>Success! Your message has been sent.</span>");
                setTimeout("$.fancybox.close()", 5000);
              });
            } // if
          } // success
        }); // ajax
        return false; // cancel the submit
      });
于 2012-12-18T09:12:15.470 に答える