jQuery Validation Plugin, phoneUS поле нарушает форму

Question

Я работаю над простой формой, используя плагин проверки jquery для проверки на стороне браузера, и по какой-то причине без ведома мне кажется, что правило «phoneUS» похоже нарушая остальную часть кода проверки.

Пока это поле («tel») пустое в форме, валидация работает по назначению. Но если что-либо вводится в телефонное поле (включая буквы), то проверка пропускается и форма отправляется, даже если другие обязательные поля остаются пустыми. Однако, если правило «phoneUS» выведено из кода, все еще применяются другие правила проверки, применяемые к «tel». Излишне говорить, что я совершенно смущен.

Сценарий:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#survey1').validate({ 
    rules: { 
    firstname: { 
      required: true, 
      },  

    lastname: { 
      required: true 
      }, 

    address1: { 
      required: true 
      }, 

    city: { 
      required: true 
      },  

    state: { 
      required: true 
      }, 

    zip: { 
      required: true, 
      digits: true 
      }, 

    tel: { 
      required: true, 
      phoneUS: true 
      }, 

    email: { 
      email: true 
      } 

    } 



    }); 
}); 

</script> 

метка и поле ввода только простые текстовые поля с именами соответствующих сценария. Действие формы настроено на использование php-файла для отправки результатов по электронной почте на статический адрес электронной почты. Если какая-либо другая информация будет полезна, я предоставлю ее.

Я относительно новичок в jQuery, поэтому не стесняйтесь предлагать указатели (лишние символы и т. Д.).

Спасибо!

Answer 1

jQuery Validate не входит в стандартную функциональность phoneUS; вы должны добавить его. Перед вашего $('#survey1').validate() кода, вызовите эту функцию:

// Add US Phone Validation 
jQuery.validator.addMethod('phoneUS', function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+/g, ''); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); 
}, 'Please enter a valid phone number.'); 

Answer 2

Вам необходимо включить additional-methods.js file, который содержит phoneUS правила/метод.

С другой стороны, если вы не хотите включать в другой файл JavaScript, вы можете вручную добавить только phoneUS правила/метод:

jQuery.validator.addMethod("phoneUS", function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^(\+?1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); 
}, "Please specify a valid phone number"); 

DEMO: http://jsfiddle.net/AFpaC/