2015-12-15 1 views
1

Quelqu'un peut-il me dire pourquoi les champs yourTelephoneNumbers et yourEmailAddress ne sont pas validés? Fondamentalement, j'essaye de concevoir mon formulaire de sorte que l'utilisateur doit entrer un numéro de téléphone ou une adresse électronique.Pourquoi jQuery ne valide-t-il pas le travail sur mon formulaire?

Console Log;

Erreur: Bootstrap infobulles nécessitent Tether (http://github.hubspot.com/tether/) bootstrap.js: 2772: 1

TypeError: validateur est définie

code dans <head> étiquette;

<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 - Cliquez sur le bouton intitulé « Faire une demande »

jsFiddle

+0

votre jquery se brise s'il vous plaît vérifier console. –

+0

@ParthTrivedi - S'il vous plaît voir mon édition –

+0

son travail là et aucune erreur dans la console. J'ai reçu un message de succès dans la console. {"status": "success", "message": "Ceci est le message de réussite." } – Farhan

Répondre

2

Puisque vous ne nous avez pas montrer le code réel dans votre OP, je ne peux pas commenter sur les différentes questions dans votre jsFiddle ...

  1. Vous avez id="makeEnquiry" dupliqués sur le <div> une sd sur le <form>. Vous ne pouvez pas dupliquer id et puisque la méthode .validate() est attachée à ce id dupliqué, cela ne fonctionnerait pas du tout puisqu'il utilise la première instance du div et en ignorant l'instance du form.

  2. Vous MUST utiliser l'attribut name dans les objets rules et messages à l'intérieur de la méthode .validate(). L'attribut name était entièrement absent de votre balisage HTML. Le plugin jQuery Validate ne fonctionnera pas du tout lorsque l'attribut name est manquant.

  3. Vous avez un }); supplémentaire dans votre jsFiddle provoquant une erreur de syntaxe.

  4. Il manque à votre jsFiddle un gestionnaire d'événements DOM ready. La méthode require_from_group nécessite the additional-methods.js file. Il manque de votre jsFiddle.

  5. Il y avait beaucoup de bogues avec la méthode require_from_group dans les versions précédentes de ce plugin. Votre jsFiddle utilise jQuery (1.7) et jQuery Validate (1.9), qui ont tous deux plusieurs années maintenant. Mettre à jour aux dernières versions.

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

+0

Le point 1 de votre message a corrigé mon problème, merci! –

+1

@MichaelLB, je vous en prie. Mais # 2 est également obligatoire ... ce plugin ne fonctionnera pas si les attributs 'name' sont manquants. – Sparky