CODEWITHSUNDEEP
jqueryjquery-validatetwitter-bootstrap-4bootstrap-4
Michael LB
Michael LB

Reputation: 2722

Why isn't jQuery validate working on my form?

Can anyone tell me why the fields yourTelephoneNumbers and yourEmailAddress aren't being validated? Basically, I'm trying to design my form so that the user must enter either a phone number or email address.

Console Log;

Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/) bootstrap.js:2772:1

TypeError: validator is undefined

Code in <head> tag;

<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>

Actual development site - Click the button labelled 'Make Enquiry'

jsFiddle

Upvotes: 1

Views: 1343

Answers (1)

Sparky
Sparky

Reputation: 98718

Since you did not show us the actual code in your OP, I can only comment on the various issues in your jsFiddle...

  1. You have id="makeEnquiry" duplicated on the <div> and on the <form>. You cannot duplicate any id and since the .validate() method is attached to this duplicated id, it would not work at all since it's using the first instance from the div and ignoring the instance from the form.

  2. You MUST use the name attribute within the rules and messages objects inside of the .validate() method. Your HTML markup was missing the name attribute entirely. The jQuery Validate plugin will not work at all when the name attribute is missing.

  3. You have an extra }); in your jsFiddle causing a syntax error.

  4. Your jsFiddle is missing a DOM ready event handler.

  5. The require_from_group method needs the additional-methods.js file included. It is missing from your jsFiddle.

  6. There were many bugs with the require_from_group method in previous versions of this plugin. Your jsFiddle is using jQuery (1.7) and jQuery Validate (1.9), both of which are several years old by now. Update to the latest versions.

Working DEMO: http://jsfiddle.net/8a3mwkw5/

Upvotes: 2

Related Questions