Почему проверка jQuery не работает в моей форме?

Кто-нибудь может сказать мне, почему поля yourTelephoneNumbers и yourEmailAddress не проверяются? По сути, я пытаюсь создать свою форму так, чтобы пользователь должен был ввести либо номер телефона, либо адрес электронной почты.

Журнал консоли.

Ошибка: всплывающие подсказки Bootstrap требуют начальной загрузки Tether (http://github.hubspot.com/tether/). js:2772:1

TypeError: валидатор не определен

Код в теге <head>

<head>
<title><?php echo COMPANY_NAME_DISPLAY; ?></title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- jQuery Theme CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css">
<!-- Lightbox CSS -->
<link rel="stylesheet" href="<?php echo SITE_CSS; ?>lightbox.css">
<!-- Fancybox CSS -->
<link rel="stylesheet" href="<?php echo SITE_CSS; ?>fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<!-- Custom CSS -->
<link rel="stylesheet" href="<?php echo SITE_CSS; ?>style.css">
<!-- jQuery first, then Bootstrap JS. --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script><!-- jQuery UI -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script><!-- Form validation -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js"></script><!-- Form validation extension -->
<script src="http://maps.google.com/maps/api/js"></script><!-- Google Maps -->
<script src="<?php echo SITE_JAVASCRIPT; ?>fancybox/jquery.mousewheel-3.0.6.pack.js"></script><!-- Fancybox -->
<script src="<?php echo SITE_JAVASCRIPT; ?>fancybox/jquery.fancybox.pack.js?v=2.1.5"></script><!-- Fancybox -->
<script src="<?php echo SITE_JAVASCRIPT; ?>jquery.form.min.js"></script><!-- AJAX form -->
</head>

Сайт актуальной разработки – нажмите кнопку "Сделать запрос".

jsFiddle


jquery bootstrap-4 jquery-validate twitter-bootstrap-4
person Michael LB    schedule 15.12.2015    source источник
comment
ваш jquery не работает, проверьте console.   -  person Parth Trivedi    schedule 15.12.2015
comment
@ParthTrivedi - Пожалуйста, посмотрите мое редактирование   -  person Michael LB    schedule 15.12.2015
comment
там все работает, а в консоли ошибок нет. я получил сообщение об успехе в консоли. { статус: успех, сообщение: это сообщение об успехе. }   -  person Farhan    schedule 15.12.2015
comment
Пожалуйста, покажите нам соответствующую RENDERED HTML-разметку и JavaScript в вашем OP. Вы показываете нам только PHP для вашего раздела head. Не полагайтесь на сломанный jsFiddle, чтобы показать ваш код, и не ждите, что мы будем копаться в вашем рабочем сайте... ни то, ни другое не будет очень полезно для будущих читателей. Спасибо.   -  person Sparky    schedule 15.12.2015

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку вы не показали нам фактический код в своем OP, я могу только прокомментировать различные проблемы в вашем jsFiddle...

  1. Вы продублировали id="makeEnquiry" на <div> и на <form>. Вы не можете дублировать никакие id, и поскольку метод .validate() прикреплен к этому дублированному id, он вообще не будет работать, поскольку он использует первый экземпляр из div и игнорирует экземпляр из form.

  2. Вы ДОЛЖНЫ использовать атрибут name в объектах rules и messages внутри метода .validate(). В вашей HTML-разметке полностью отсутствовал атрибут name. Плагин jQuery Validate вообще не будет работать, если атрибут name отсутствует.

  3. У вас есть лишний }); в вашем jsFiddle, вызывающий синтаксическую ошибку.

  4. В вашем jsFiddle отсутствует обработчик событий готовности DOM.

  5. Для метода require_from_group необходимо включить файл additional-methods.js. Он отсутствует в вашем jsFiddle.

  6. В предыдущих версиях этого плагина было много ошибок с методом require_from_group. Ваш jsFiddle использует jQuery (1.7) и jQuery Validate (1.9), которым уже несколько лет. Обновление до последних версий.

Рабочая демонстрация: http://jsfiddle.net/8a3mwkw5/

person Sparky    schedule 15.12.2015
comment
@MichaelLB, пожалуйста. Но #2 также является обязательным... этот плагин не будет работать, если отсутствуют атрибуты name. - person Sparky; 15.12.2015