フォームは ajax 経由で動的に読み込まれます。フォームが読み込まれた後、小さなフォーム プラグインの初期化を呼び出します。
シリアライズは初回のみ機能しますが、フォームに必須フィールドのエラーがある場合、2 回目の送信がトリガーされますが、シリアライズは空の文字列を返します。この問題は 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> }