поле ввода плагина проверки jquery и кнопка отправки не работают

Question

У меня много проблем с простым плагином, плагин проверки правильности jQuery: Мне нужно установить форму с тремя полями, имя (обязательно) email (обязательно, формат электронной почты), телефон (не требуется, формат номера 11 цифр).

это HTML:

<form class="form" id="contactusform"> 
<div class="row"> 
    <div class="col-sm-4 form-label"> 
    <label for="cname">Contact Name*</label> 
    </div> 
    <div class="col-sm-6 form-row"> 
    <input id="cname" name="name" type="text" class="form-field" required> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-4 form-label"> 
    <label for="cemail">Contact Email Address*</label> 
    </div> 
    <div class="col-sm-6 form-row"> 
    <input id="cemail" name="email" type="email" class="form-field" required> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-4 form-label"> 
    <label for="cphone">Contact Phone Number</label> 
    </div> 
    <div class="col-sm-6 form-row"> 
    <input id="cphone" name="phone" type="text" class="form-field"> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-6 form-send-button"> 
    <div class=""> 
    <input id="submit" type="button" class="btn send-button" value="SEND"> 
    </div> 
    </div> 
</div> 

это сценарий:

$(document).ready(function() { 
    $("#contactusform").validate({ 
     rules: { 
     name: "required", 
     email: { 
      required: true, 
      email: true 
     }, 
     phone: { 
      required: false, 
      digits: true, 
      minlenght: 11 
     } 
     }, 
     messages: { 
     name: "Please specify your name", 
     email: { 
      required: "We need your email address to contact you", 
      email: "Email must be in the format of name@domain.com" 
     }, 
     phone: { 
      minlenght: "please insert a number of 11 digits", 
      digits: "The value must be a number" 
     } 
     } 
    }); 
}); 

Я использую валидаторы плагин и JQuery сценариев:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.min.js"></script> 

Этот код не работает правильно, я пробую много раз, и кнопка, похоже, не работает вообще. Мне нужно показать сообщение под полями повторно, если кнопка отправки нажата без какого-либо значения в полях.

Answer 1

две проблемы:

1. Изменить type="button" в type="submit", чтобы получить работу представить кнопку.

   <input id="submit" type="submit" class="btn send-button" value="SEND"> 
   

2. Вы опечатка в minlength правило как minlenght как в ваших rulesmessages и опций.

   phone: { 
       // required: false, // superfluous 
       digits: true, 
       minlength: 11 
   } 
   

Примечание:

• Поскольку вы включили файл additional-methods.js, вы могли просто использовали один из встроенных в телефонном номере правила вместо этого.

  • phoneUS
  • phoneUK
  • phonesUK
  • phoneNL
  • mobileNL
  • mobileUK

• Вам не нужно ехр законно установленный required - false. Просто оставить правило required достаточно.

• Вы должны использовать заполнитель, {0}, в пределах вашего пользовательского сообщения. Затем сообщение автоматически использует тот же параметр, что и правило.

  minlength: "please insert a number of {0} digits" 
  

Рабочая DEMO: http://jsfiddle.net/fbhacfy4/

Answer 2

Вы почти здесь, вам просто нужно изменить тип кнопки на submit.

<input id="submit" type="submit" class="btn send-button" value="SEND"> 

Адрес jsfiddle.