Вызовите проверку на стороне клиента MVC 3 вручную для сообщений ajax
Я создаю веб-приложение MVC 3. Я хочу использовать аннотации данных в своем классе сущностей, а затем использовать ненавязчивую проверку на стороне клиента, прежде чем отправлять сообщение обратно на сервер. Это прекрасно работает при создании обычного поста. Я получаю проверку и сводку проверки, если какое-либо из полей недействительно. Тем не менее, я хочу отправить обратно информацию через ajax и json. Как я могу "вручную" проверить форму на стороне клиента, а затем сделать мой ajax post обратно на сервер. Ниже сокращенный вариант моего кода.
public class Customer
{
[Required(ErrorMessage = "The customer's first name is required.")]
public string FirstName { get; set; }
[Required(ErrorMessage = "The customer's 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
});
8 ответов:
попробуй:
//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 он будет автоматически обрабатывать это для вас.
Я уже несколько дней занимаюсь проверкой на стороне клиента MVC:
не использовать .нажмите кнопку Использовать .отправить:
$("#MyForm").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").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; });
по крайней мере, в моем случае (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/
важно!!:
решение пола-это правильный ответ на вопрос, а не Доктора Роба.
хотя вы можете просто использовать valid () вместо validate ().форма.)(
но что еще более важно, на самом деле нет причин ограничивать ваш код, как предложил доктор Роб, т. е. нет .нажмите и только использовать .представить. Это не то, что решило проблему! Что решило проблему, так это обернуть $.Аякс.(..) позвонить в случае, если заявление. Т. е.:
if($("#MyForm").valid()) { //call to $.ajax or equivalent goes in here. }Я думаю, это необходимо уточнить, поскольку в противном случае реальный ответ на проблему запутан.
if(!$('#myform').data('unobtrusiveValidation').validate()) { // add your extra custom logic } else { $('#myform').submit(); }он запускает проверку и возвращает логическое значение, поэтому вы можете проверить перед отправкой.
.Действует() работает. то есть он говорит вам, является ли ваша форма действительной. Однако в одиночку это не помогает правильно показывать и скрывать сообщения. вот мой метод ручной проверки
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; } }
I tried all of the above solutions but none worked on MVC5.Я использую jQuery v2.1.4 и jQuery.Проверка В1.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(); }
Comments