我有一个登录模式,这是一个局部视图,然后我可以弹出窗口供用户随时登录。它是它的样子。
@model LeduInfo.Models.LoginModel
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"> Login </h4>
</div>
<div class="container">
<div class="modal-body">
@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @id="signinForm"}))
{
@Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
<div class="control-group">
<label class="control-label" for="inputEmail">User Name</label>
<div class="controls">
@Html.TextBoxFor(m => m.UserName, new { @name = "inputUser", @class = "form-control", @id = "inputUser", @placeholder = "User Name" })
@Html.ValidationMessageFor(m=>m.UserName)
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
@Html.TextBoxFor(m => m.Password, new { @name = "inputPassword", @class = "form-control", @id = "inputPassword", @placeholder = "Password", @type = "password" })
@Html.ValidationMessageFor(m=>m.Password)
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
Remember me @Html.CheckBoxFor(m => m.RememberMe)
<span class="span9"> @Html.ActionLink("Register", "Register", "Account") </span>
</label>
<button type="button" id="submit_btn" class="btn btn-primary" >sign in</button>
</div>
</div>
}
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
但是现在,我知道它将在点击登录按钮和窗口关闭时提交表单,这不是我想要的,然后我添加如下的jquery代码来手动提交表单。但如果在这种情况下,那么我无法从服务器返回信息进行验证,如何使用提交表单修复它但不是关闭模式?
<script type="text/javascript">
// Setup form validation on the #register-form element
$('#submit_btn').click(function () {
var form = $('#singinForm');
$("#signinForm").validate({
// Specify the validation rules
rules: {
inputUser: "required",
password: {
required: true,
minlength: 6
}
},
// Specify the validation error messages
messages: {
inputUser: "Please enter your first name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least {0} characters long"
},
},
submitHandler: function (form) {
form.submit();
$('#signinForm').find("#submit_btn").attr("disabled", true).attr("value", "Submitting...");
}
});
}
});