Вызов MVC 3 Проверка на стороне клиента вручную для сообщений ajax
Я создаю веб-приложение MVC 3. Я хочу использовать Data Annotations для моего класса сущности, а затем использовать ненавязчивую проверку на стороне клиента, прежде чем отправлять сообщение обратно на сервер. Это нормально работает при создании регулярного сообщения. Я получаю валидацию и сводку проверки, если какое-либо из полей недействительно. Тем не менее, я хочу опубликовать информацию через ajax и json. Как я могу "вручную" проверить форму на стороне клиента, а затем вернуть сообщение ajax на сервер. Ниже приведена сводная версия моего кода.
public class Customer
{
[Required(ErrorMessage = "The customer first name is required.")]
public string FirstName { get; set; }
[Required(ErrorMessage = "The customer last name is required.")]
public string LastName { get; set; }
}
<% using (Html.BeginForm()) { %>
<%: Html.LabelFor(model => model.FirstName, "First Name")%>
<%: Html.TextBoxFor(model => model.FirstName, new { @class = "TextBox", id = "Customer.FirstName" })%>
<%: Html.ValidationMessageFor(model => model.FirstName, "*")%>
<%: Html.LabelFor(model => model.LastName, "Last Name")%>
<%: Html.TextBoxFor(model => model.LastName, new { @class = "TextBox", id = "Customer.LastName" })%>
<%: Html.ValidationMessageFor(model => model.LastName, "*")%>
<div id="CustomerEditSave" class="Button CustomerEditButtons" style="margin-right:40px;">
<a href="#">Save</a>
</div>
<%: Html.ValidationSummary(true) %>
<% } %>
Я пробовал этот код, но он проверяет только первое имя и не отображает сводку проверки.
$("#CustomerEditSave").click(function () {
$(form).validate();
//Ajax call here
});
Ответы
Ответ 1
Try:
//using the form as the jQuery selector (recommended)
$('form').submit(function(evt) {
evt.preventDefault();
var $form = $(this);
if($form.valid()) {
//Ajax call here
}
});
//using the click event on the submit button
$('#buttonId').click(function(evt) {
evt.preventDefault();
var $form = $('form');
if($form.valid()) {
//Ajax call here
}
});
Это должно работать с вызовами jQuery ajax и MSAjax. Также можно попытаться использовать http://nuget.org/packages/TakeCommand.js или https://github.com/webadvanced/takeCommand it будет автоматически обрабатывать это для вас.
Ответ 2
Я трахался с проверкой на стороне клиента MVC в течение нескольких дней:
Не используйте.click используйте.submit:
$("#MyForm").on('submit',function () {
if($("#MyForm").valid())
{
//Do ajax stuff
}
//Return false regardless of validation to stop form submitting
//prior to ajax doing its thing
return false;
});
Я собираюсь добавить обновление к этому, рассмотреть возможность отмены события, а не возврата false (или сделать оба):
$("#MyForm").on('submit',function (e) {
if($("#MyForm").valid())
{
//Do ajax stuff
}
e.preventDefault();
//Return false regardless of validation to stop form submitting
//prior to ajax doing its thing
return false;
});
Ответ 3
По крайней мере, в моем случае (MVC 5) необходимо было добавить следующий код, иначе .valid()
всегда будет возвращать true:
$(function () {
$(document).ajaxComplete(function(event, request, settings){
//re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled
$.validator.unobtrusive.parse(document);
});
});
См. http://johnculviner.com/the-unobtrusive-libraries-client-validation-on-ajax-in-asp-net-mvc-3/
Ответ 4
ВАЖНО!!:
Решение Павла - правильный ответ на вопрос, а не доктор Роб.
Хотя вы можете просто использовать valid() вместо validate(). form().
Но что более важно, действительно нет причин для ограничения вашего кода, как это предложил д-р Роб, т.е. не .click и использовать только .submit. Это не то, что решило проблему! То, что решило проблему, заключалось в завершении вызова $.ajax(...) в выражении if. То есть:
if($("#MyForm").valid())
{
//call to $.ajax or equivalent goes in here.
}
Я думаю, что это нужно прояснить, так как в противном случае реальный ответ на проблему запутан.
Ответ 5
$(YourForm).data( 'unobtrusiveValidation'). Подтверждения()
Ответ 6
if(!$('#myform').data('unobtrusiveValidation').validate())
{
// add your extra custom logic
}
else
{
$('#myform').submit();
}
Он запускает проверку и возвращает логическое значение, поэтому вы можете проверить его перед отправкой.
Ответ 7
.Valid() работает. то есть он говорит вам, действительна ли ваша форма. Однако в одиночку это не помогает показать И скрывать сообщения правильно. здесь мой метод проверки вручную
function validate()
{
//valid() not only tells us whether the form is valid but
//also ensures that errors are shown !!!
if ($("form").valid())
{
//if the form is valid we may need to hide previously displayed messages
$(".validation-summary-errors").css("display", "none");
$(".input-validation-error").removeClass("input-validation-error");
return true;
}
else
{
//the form is not valide and because we are doing this all manually we also have to
//show the validation summary manually
$(".validation-summary-errors").css("display", "block");
return false;
}
}
Ответ 8
I tried all of the above solutions but none worked on MVC5.
Я использую jQuery v2.1.4 и jQuery.Validation v1.11.1.
Мне нужно активировать проверку во время рендеринга страницы. Только ниже меня работали.
$(document).ready(function () {
...
validateForm();
}
function validateForm() {`enter code here`
var elem = document.getElementById('btnSave');
elem.click();
}
$('#btnSave').click(function (evt) {
//evt.preventDefault();
var form = $('form');
if (form.valid()) {
//Ajax call here
}
//$(".validation-summary-errors").css("display", "block");
});
function Validate() {
// If no group name provided the whole page gets validated
Page_ClientValidate();
}