0

我使用 jQuery 进行验证，然后使用 AJAX 在单个页面上提交多个表单。用户每次访问只需填写一份表格。目前 jQuery 只能定位和验证第一个表单，我不确定如何调整它以处理其他表单的存在 - 该脚本是从一个运行良好的单一表单环境中获取的。我看过各种关于能够做到这一点的帖子，但我不知道如何将它们应用于我的情况。

<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。

它是一个通用处理程序，应该处理具有类“联系人”的多个表单，这些表单都具有名称、电子邮件和 msg 字段

您将不得不修改一些选择器，例如我不知道您是否想要每个表单的发送跨度，所以我假设您这样做了并且它是表单的兄弟

    $(".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 回答