Javascript jQuery表单在同一页面上验证并提交多个表单；未捕获的语法错误：无效或意外的标记“；

我试图通过PHP将同一页面上多个表单的用户详细信息提交到MailChimp列表

我的代码如下：

index.html

  <form id="contact-form" name="contact-form" action="assets/php/send.php" method="post" novalidate="novalidate">
                            <fieldset>

                            <div id="alert-area"></div>

                                <input class="col-sm-6 col-xs-12" id="fname" type="text" name="fname" placeholder="first name">

                                <input class="col-sm-6 col-xs-12" id="lname" type="text" name="lname" placeholder="last name">

                                <input class="col-sm-6 col-xs-12" id="number" type="text" name="number" placeholder="number">

                                <input class="col-sm-6 col-xs-12" id="email" type="text" name="email" placeholder="email">

                                <input class="btn btn-default blue" id="submit" type="submit" name="submit" value="Submit" onclick="ga('send', 'event', ‘scholars’, 'click', ‘s-rs’);">
                                  <div id='response'></div>

                            </fieldset>
                         </form>
   <form id="contact-form" name="contact-form" action="assets/php/send.php" method="post" novalidate="novalidate">
                            <fieldset>

                            <div id="alert-area"></div>

                                <input class="col-sm-6 col-xs-12" id="fname" type="text" name="fname" placeholder="first name">

                                <input class="col-sm-6 col-xs-12" id="lname" type="text" name="lname" placeholder="last name">

                                <input class="col-sm-6 col-xs-12" id="number" type="text" name="number" placeholder="number">

                                <input class="col-sm-6 col-xs-12" id="email" type="text" name="email" placeholder="email">

                                <input class="btn btn-default blue" id="submit" type="submit" name="submit" value="Submit" onclick="ga('send', 'event', ‘scholars’, 'click', ‘s-rs’);">
                                  <div id='response'></div>

                            </fieldset>
                         </form>

---

这对第一个表单很有效，但对其他表单给出了“未捕获的SyntaxError:无效或意外标记”

该SyntaxError是由于ga onCLick事件中的恶意引号造成的

使用以下jQuery代码解决了多表单提交问题

function validateForm(){
    $('form').each(function(){
        $(this).validate({
    // all fields are required
    rules: {
        fname: {
            required: true
        },
        lname: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        number: {
            required: true,
            number: true
        }
    },
    // if valid, post data via AJAX
    submitHandler: function (form) {
        $.post("assets/php/send.php", $(form).serializeArray().reduce(function(obj, item) {
            obj[item.name] = item.value;
            return obj;
        }, {})

        , function (data) {
            $(form).find('#response').html(data);
        });
    }
 })
})
}

---

所有表单都有唯一的ID。此代码也适用于模态表单。希望这有帮助

因此，对于给定的形式（问题中），它是有效的。正确吗？一页中有两张表格。正确吗？这可能是因为它们有相同的

名称

和

id

？至少id应该是唯一的，在validator中使用表单类名而不是表单标记！！

function validateForm(){
    $('form').each(function(){
        $(this).validate({
    // all fields are required
    rules: {
        fname: {
            required: true
        },
        lname: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        number: {
            required: true,
            number: true
        }
    },
    // if valid, post data via AJAX
    submitHandler: function(form){
        $.post("assets/php/send.php", {
            fname: $("#fname").val(),
            lname: $("#lname").val(),
            email: $("#email").val(),
            number: $("#number").val()
        }, function (data) {
            $('#response').html(data);
        });
    }
  })
 })
}

function validateForm(){
    $('form').each(function(){
        $(this).validate({
    // all fields are required
    rules: {
        fname: {
            required: true
        },
        lname: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        number: {
            required: true,
            number: true
        }
    },
    // if valid, post data via AJAX
    submitHandler: function (form) {
        $.post("assets/php/send.php", $(form).serializeArray().reduce(function(obj, item) {
            obj[item.name] = item.value;
            return obj;
        }, {})

        , function (data) {
            $(form).find('#response').html(data);
        });
    }
 })
})
}