Question

表单是通过ajax动态加载的。加载表单后，我调用我的小表单插件的初始化 Serialize仅在第一次工作，但如果表单有必填字段错误，则会触发第二次提交，但序列化会给出空字符串。仅在Firefox中出现此问题。适用于Chrome，IE，Safari

我的小表单插件：

App.Forms = (function (parent, $) {

// Default config
var config = {
    form            : '.ajax-form',
    control         : null,
    successCallback : function () {},
    errorCallback   : function () {}

}, _submitForm = function ($form) {

    console.log('--------------- FORM DATA STRING -----------------');
    console.log($form.serialize());
    console.log('--------------------------------------------------');

    $.ajax({
        type    : $form.attr('method'),
        url     : $form.attr('action'),
        data    : $form.serialize(),
        cache   : false,
        success : function (response) {

            if (config.control === null) {
                $form.hide().html(response).fadeIn(800);

            } else {
                $(config.control).hide().html(response).fadeIn(800);
                //                    console.log(response);
            }

            if ($(response).find('.field-validation-error')) {
                App.Placeholder.init();  // Generate placeholder if browser not support
                config.errorCallback.call();
            } else {
                config.successCallback.call();
            }

        }
    });
};

parent.init = function (options) {

    $.extend(config, options);

    var $form = $(config.form);

    if (!$form.length) {
        return false;
    }

    App.Placeholder.init();  // Generate placeholder if browser not support

    $form.on('click', ':submit', function (e) {
        e.preventDefault();
        _submitForm($form);
    });

    return parent;
};

return parent;  }) (App.Forms || {}, jQuery);

形式：

@using N2Project @model N2Project._Essence.Models.RegisterModel  @using (Html.BeginForm("Register", "LoyaltyLogin", FormMethod.Post, new { @id = "register-form" })) {
<p>
    <span class="error">@ViewBag.Error</span>
    <span class="success">@ViewBag.Success</span>
</p>

<p>
    @Html.TextBoxFor(m=>m.Loyaltycard,new{@placeholder="Card Number", @class="size100"})
    @Html.ValidationMessageFor(m=>m.Loyaltycard)
</p>

<p>
    @Html.TextBoxFor(m=>m.FirstName,new{@placeholder="First Name", @class="size100"})
    @Html.ValidationMessageFor(m=>m.FirstName)
</p>

<p>
    @Html.TextBoxFor(m=>m.LastName,new{@placeholder="Last Name", @class="size100"})
    @Html.ValidationMessageFor(m=>m.LastName)
</p>

<p>
    @Html.TextBoxFor(m=>m.DOB,new{@placeholder="Date of birth", @class="size100", @id="dob"})
    @Html.ValidationMessageFor(m=>m.DOB)
</p>

<p>
    @Html.TextBoxFor(m=>m.Email,new{@placeholder="Email", @class="size100"})
    @Html.ValidationMessageFor(m=>m.Email)
</p>

<p>
    @Html.PasswordFor(m=>m.Password,new{@placeholder="Password", @class="size100"})
    @Html.ValidationMessageFor(m=>m.Password)
</p>


<p class="checkbox">
    <input type="checkbox" id="subscribe" name="Subscribe" value="true" />
    <label for="subscribe">
        By registering you agree to recieve news and promotions from Essence via email
    </label>
</p>

<p>
    <button href="#" type="submit" class="btn size100">Send</button>
</p> }

Answer 1

问题解决了这个问题： _submitForm（$（本）.closest（ '形式'））;

当我调用submitForm私有方法时，我正在传递最接近的形式，并且它正在工作。

有人可以解释为什么它有效吗？为什么我们不在第一种情况下在firefox中工作？

表单序列化在Firefox中不起作用

1 个答案: