Проверка MVC4 не работает

Question

У меня есть простая 1-страничная программа для отправки электронной почты пользователям. У меня есть 3 поля для имени, электронной почты и номера телефона. Кажется, что код работает с кнопкой ввода, с проверкой правильности и выдачей правильного сообщения об ошибке. Но я больше склонен использовать привязывающий тег (ActionLink) для своего пользовательского интерфейса. Данные по-прежнему сохраняются, когда я нажимаю на тег привязки (используя jQuery), но проверки не срабатывают. Есть ли что-то, что мне не хватает, или есть лучший способ сделать это?

Я использовал this пост как ссылка.

Модель

public class Contact 
{ 
    [Required(ErrorMessage = "Name is required")] 
    public string Name { get; set; } 

    [Required(ErrorMessage = "Email is required")] 
    public string Email { get; set; } 

    [Required(ErrorMessage = "Phone is required")] 
    public string PhoneNumber { get; set; } 
} 

Посмотреть

  <div> 
       @Html.TextBoxFor(model => model.Name, new { @class = "form-control", placeholder="Name" }) 
       @Html.ValidationMessageFor(model=>model.Name) 
      </div> 
      <div> 
       @Html.TextBoxFor(model => model.Email, new { @class = "form-control", placeholder="Email" }) 
       @Html.ValidationMessageFor(model=>model.Email) 
      </div> 
      <div> 
       @Html.TextBoxFor(model => model.PhoneNumber, new { @class = "form-control", placeholder="Phone" }) 
       @Html.ValidationMessageFor(model=>model.PhoneNumber) 
      </div> 
      <div> 
       <input type="submit" value="Give me Free Advice" /> 
       <div class="btn"> 
        @Html.ActionLink("I want free advice", "designerhome") 
       </div> 
      </div> 
    <script> 
    $(function() { 
     $('.btn').click(function (e) { 

      $.post("/campaign/designerhome", { Name: $("#Name").val(), Email: $("#Email").val(), PhoneNumber: $("#Phone").val() }, function (result) { 
       //do whatever with the response 
       if (result.status == true) { 
        alert('Email submitted successfully'); 
       } 
      });//end of post 
     });//end of click 
    }); 
</script> 

Контроллер

[HttpPost] 
    public ActionResult designerhome(Contact contact) 
    { 
     if (ModelState.IsValid) 
     { 
     } 
     return View("Advert1"); 
    } 

Answer 1

У нас есть несколько причин, почему проверка не работает

1. Проверьте AppSettings в веб-конфигурации

<add key="ClientValidationEnabled" value="true" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 

Оба должны быть правдой, если вы хотите запустить проверку на стороне клиента.

2. Кажется, в вашем коде вы не используете тег формы, как она размещена в вопросе

Форма тег должен для проверки

3. Jquery не правильно refrenced на макет страницы

пожалуйста, проверьте следующее Jquery refrence на странице макета

jquery.unobtrusive*.js 
jquery.validate*.js 

Надеюсь, это поможет вам.

Answer 2

Просто укладывать кнопку ввода, чтобы посмотреть л икэ ссылка со следующей CSS:

input[type=submit] { 
 
    background:none!important; 
 
    border:none; 
 
    padding:0!important; 
 
    color:#069; 
 
    text-decoration:underline; 
 
    cursor:pointer; 
 
}

<input type="submit" value="Give me Free Advice" />

Это позволит всем встроенным проверкам работать как есть, без разницы для пользователя, кроме внешнего вида.

Если вам нужно использовать ajax для отправки, вы должны вручную вызвать метод проверки в JavaScript с jquery ненавязчивым.

Это можно сделать с помощью следующих действий:

// replace the `formId` with the one defined in your view 
    var $form = $('#formId'); 
    $.validator.unobtrusive.parse($form); 
    $form.validate(); 
    if ($form.valid()) { 
     // Do post 
    } 

Для того, чтобы вручную вытащить сообщения об ошибках, которые можно использовать следующим образом:

$.each($form.validate().errorList, function (key, value) { 
      $errorSpan = $("span[data-valmsg-for='" + value.element.id + "']"); 
      $errorSpan.html("<span style='color:red'>" + value.message + "</span>"); 
      $errorSpan.show(); 
     }); 

который заменяет ValidationMessageFor разметку с сообщений о сбое.

Answer 3

Я бы заставить проверку в вашем click обработчика как JQuery, кажется, сделать это только для автоматического представить в виде (а не для ручного post() вы делаете):

$('.btn').click(function (e) { 
    if ($('#YourFormIdHere').valid()) { // Will force validation 
     $.post(...); 
    } 
}); 

Answer 4

Как ваши решения a Ajax запрос на Действие, Ваши подтверждения не будут отображаться, так как представление не отображается повторно. Чтобы остаться на одной и той же дорожке, вы можете вернуть JSON, как

return Json(new {Valid = validState, 
       Errors = Get Errors FromModel State, 
      }); 

, а затем повторно заполнить с использованием JavaScript.

Другой способ может быть вокруг создания пользовательских хелперов который будет | сделать запрос POST к желаемому Action.Code Reference для же here.

И наконец, что вы можете сделать, это создать кнопку HTML и сделать запрос POST.