Проверка jQuery не работает должным образом

Question

У меня возникла проблема с выполнением работы jQuery.Validation. Я написал сценарий. Все файлы JS приведены ниже. По неизвестной причине для меня валидация всегда возвращает эту форму.

Вот мой JS код:

$(document).ready(function() 
{ 
    $("#contactForm").validate({ 
     rules: { 
      inputName: "required", 
      inputSurname: "required", 
      inputEmail: { 
       required: true, 
       email: true 
      }, 
      inputMessage: "required", 
     }, 
     messages: { 
      inputName: "Please enter your firstname", 
      inputSurname: "Please enter your lastname", 
      inputEmail: "Please enter a valid email address", 
      inputMessage: "Please accept our policy" 
     }, 
     submitHandler: function (form) { 
      alert('valid form'); 
      form.submit();// for demo 
      return false;  // for demo 
     } 
    }) 
}) 

Здесь вы можете найти мою форму:

@using (Html.BeginForm("SendMail", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form", name = "contactForm", id = "contactForm" })) 
      { 
       @Html.ValidationSummary(true); 
       @Html.AntiForgeryToken(); 
       <div class="col-lg-8"> 
        <div id="Contact" class="jumbotron contact-form"> 
         <div class="panel-heading"> 
          <h1 class="panel-title">Kontakt</h1> 
         </div> 
         <div class="input-group"> 
          <span class="input-group-addon">Imie</span> 
          @Html.TextBoxFor(model => model.name, new { @class = "form-control", placeholder = "Twoje imię", id = "inputName" }) 
         </div> 

         <div class="input-group"> 
          <span class="input-group-addon">Nazwisko</span> 
          @Html.TextBoxFor(model => model.surname, new { @class = "form-control", placeholder = "Twoje nazwisko", id = "inputSurname" }) 
         </div>  
         <div class="input-group"> 
          <span class="input-group-addon">Email</span> 
          @Html.TextBoxFor(model => model.emailAdress, new { @class = "form-control", placeholder = "Adres email", id = "inputEmail" }) 
         </div> 
         <div class="input-group"> 
          <span class="input-group-addon">Treść<br /> wiadomości</span> 
          @Html.TextAreaFor(model => model.body, new { @class = "form-control", placeholder = "Treść wiadomości", id = "inputMessage", name = "inputMessage", rows="4" }) 
         </div> 
         <div class="form-group"> 
          <div class="col-lg-offset-2 col-lg-1"> 
           <button type="submit" class="btn btn-default"> 
            Send Message 
           </button> 
          </div> 
         </div> 
        </div> 
       </div> 
      } 

Как вы можете видеть все поля обязательны для заполнения, но даже если оставить их пустыми конец пресс представить, jQuery сообщает, что форма действительна.

Здесь JSFiddle с рабочим образцом: CLICK

Answer 1

Вам необходимо настроить правила-объект в соответствии с имя-атрибута форм-элементов.

rules: { 
     'name': {required:true}, 
     'surname': {required:true}, 
     'emailAdress': { 
      required: true, 
      email: true 
     }, 
     'body': {required: true}, 
    } 

При попытке версии Anto J Субаш в назывании имени-атрибут, вероятно, несовпадающий за счет капитализации. В дополнение к ответу Anto J Subash я настоятельно рекомендую передать строковый индекс («имя») и не передавать его как «Имя», чтобы предотвратить возможные проблемы из-за зарезервированных ключевых слов в JS/jQuery.

Работа JSFiddle

Answer 2

вы должны установить name не id. вы должны установить правило для проверки name на основе имени элементов.

попробовать

$("#contactForm").validate({ 
     rules: { 
      Name: "required", 
      Surname: "required", 
      Email: { 
       required: true, 
       email: true 
      }, 
      Message: "required" 
     } 
    })