Форма проверки JQuery не работает

Question

Я создал эту HTML-форму, которая использует проверку jQuery. Тем не менее, я еще не нашел подтверждения проверки.

Это мой код JavaScript:

<script src="jquery-1.9.1.js"></script> 
<script src="jquery.validate.min.js"></script> 
<script> 
    $(function(){ 
    // Initialise le form 
    $("#faq-form").validate({ 
     // Spécifier les réglements de validation 
     rules: { 
      message:"required", 
      adresse_mail:"required", 
      slider:"required", 
      radio-choice:"required", 
      flip: "required" 
     }, 

     // Specify the validation error messages 
     messages: { 
      message: "Votre question n'est pas validé", 
      adresse_mail: "Votre est adresse mail n'est pas valide", 
      slider: "votre age n'est pas rempli!", 
      radio-choice: "Quel est votre sexe?", 
      flip:"Est-ce-que vous communiquez LCF" 
     }, 

     submitHandler: function(form) { 
      form.submit(); 
     } 
    }); 

    }); 

</script> 

Это мой HTML-форм: я назвал и определил все поля правильно. Но я не знаю, почему я не вижу сообщения о предупреждении валидации.

<form action="traitement_formulaire2.php" method="POST" id="faq-form" novalidate="novalidate"> 
    <input type="hidden" name="site" id="site" value="sis" required /> 
    <input type="email" name="adresse_mail" id="adresse_mail" /> 
    <input type="range" name="slider" id="slider" value="18" min="1" max="99" data-theme="c" /> 
    <fieldset data-role="controlgroup"> 
     <legend>Sexe<sup>*</sup></legend> 
     <input type="radio" name="radio-choice" id="radio-choice" value="Homme" class="required"> 
     Homme<br /> 
     <input type="radio" name="radio-choice" id="radio-choice" value="Femme"> 
     Femme 
    </fieldset> 

    <select name="flip-10" id="flip" data-role="slider" data-theme="c"> 
     <option value="off">Non</option> 
     <option value="on">Oui</option> 
    </select> 
    <button type="submit" name="submit">Valider</button> 
</form> 

Кто-нибудь может помочь мне выяснить мои ошибки?

Answer 1

У вас есть синтаксические ошибки в коде. Вы не можете использовать имена свойств blah-blah без кавычек. Demo.

rules: { 
     message:"required", 
     adresse_mail:"required", 
     slider:"required", 
     "radio-choice":"required", //notice "" 
     flip: "required" 
    }, 

Answer 2

Вы не можете использовать '-' для имен свойств, проверить эту скрипку: http://jsfiddle.net/kk9qge9b/

<form action="traitement_formulaire2.php" method="POST" id="faq-form" novalidate="novalidate"> 
    <input type="hidden" name="site" id="site" value="sis" required /> 
    <input type="email" name="adresse_mail" id="adresse_mail" /> 
    <input type="range" name="slider" id="slider" value="18" min="1" max="99" data-theme="c" /> 
    <fieldset data-role="controlgroup"> 
     <legend>Sexe<sup>*</sup></legend> 
     <input type="radio" name="radiochoice" id="radiochoice" value="Homme" class="required"> 
     Homme<br /> 
     <input type="radio" name="radiochoice" id="radiochoice" value="Femme"> 
     Femme 
    </fieldset> 

    <select name="flip-10" id="flip" data-role="slider" data-theme="c"> 
     <option value="off">Non</option> 
     <option value="on">Oui</option> 
    </select> 
    <button type="submit" name="submit">Valider</button> 
</form> 

Js:

$(document).ready(function() { 
    // Initialise le form 
    $("#faq-form").validate({ 
     // Spécifier les réglements de validation 
     rules: { 
      message:"required", 
      adresse_mail:"required", 
      slider:"required", 
      radiochoice:"required", 
      flip: "required" 
     }, 

     // Specify the validation error messages 
     messages: { 
      message: "Votre question n'est pas validé", 
      adresse_mail: "Votre est adresse mail n'est pas valide", 
      slider: "votre age n'est pas rempli!", 
      radiochoice: "Quel est votre sexe?", 
      flip:"Est-ce-que vous communiquez LCF" 
     }, 

     submitHandler: function(form) { 
      form.submit(); 
     } 
    }); 

    }); 

Answer 3

Пожалуйста, измените название радио-выбор radio_choice или если вы хотите сохранить имя таким же, а затем заверните имя с цитатой в js-части, например, «радио-выбор»

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 


     <script> 
      $(function() { 
       // Initialise le form 
       $("#faq-form").validate({ 
        // Spécifier les réglements de validation 
        rules: { 
         message: "required", 
         adresse_mail: "required", 
         slider: "required", 
         radio_choice: "required", 
         flip: "required" 
        }, 
        // Specify the validation error messages 
        messages: { 
         message: "Votre question n'est pas validé", 
         adresse_mail: "Votre est adresse mail n'est pas valide", 
         slider: "votre age n'est pas rempli!", 
         radio_choice: "Quel est votre sexe?", 
         flip: "Est-ce-que vous communiquez LCF" 
        }, 
        submitHandler: function(form) { 
         form.submit(); 
        } 
       }); 
      }); 

     </script> 
    </head> 
    <body> 
     <form action="traitement_formulaire2.php" method="POST" id="faq-form" novalidate="novalidate"> 
      <input type="hidden" name="site" id="site" value="sis" required/> 
      <input type="email" name="adresse_mail" id="adresse_mail" /> 
      <input type="range" name="slider" id="slider" value="18" min="1" max="99" data-theme="c" /> 
      <fieldset data-role="controlgroup"> 
       <legend>Sexe<sup>*</sup></legend> 
       <input type="radio" name="radio_choice" value="Homme" class="required"> Homme<br /> 
       <input type="radio" name="radio_choice" value="Femme"> Femme 
      </fieldset> 

      <select name="flip-10" id="flip" data-role="slider" data-theme="c"> 
       <option value="off">Non</option> 
       <option value="on">Oui</option> 
      </select> 
      <button type="submit" name="submit">Valider</button> 

     </form> 


    </body> 
</html>