2014-12-17 4 views
-2

jQuery 유효성 검사를 사용하는이 HTML 양식을 만들었습니다. 그러나 아직 유효성 검사 경고를 찾지 못했습니다.JQuery 유효성 검사 양식이 작동하지 않습니다.

이 내 자바 스크립트 코드 :

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

누구든지 내 실수를 찾아 낼 수 있습니까?

+0

HTML 이전! 지금 확인하겠습니다. – Techappri

+1

@HowardRenollet 그는 IIFE가 아닌'DOMContentLoaded' 이벤트를 사용하고 있습니다. –

+0

@YuryTarabanko - 나는'$'... 내 잘못을 놓쳤다. :) –

답변

2

코드에 구문 오류가 있습니다. 따옴표없이 blah-blah 속성 이름을 사용할 수 없습니다. Demo.

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

예. 누구나 참조하십시오 : http://jqueryvalidation.org/reference/#fields-with-complex-names-(brackets-dots) – Sparky

0

당신은 사용할 수 없습니다 '-'속성 이름을,이 바이올린을 확인하십시오 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(); 
     } 
    }); 

    }); 
+0

대단히 감사합니다! 작동 중입니다 – Techappri

1

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

그는 이름을 변경할 필요가 없습니다. 인용문 만 사용하십시오. 참조 : http://jqueryvalidation.org/reference/#fields-with-complex-names-(brackets-dots) – Sparky

+0

그럼 그는 "라디오 선택"과 같은 인용 부호로 이름을 싸야합니다 –

+0

@FarukOmar : 안녕하세요, 선생님, 슬라이더에 마지막 문제가 있습니다. 이것은 내 유효성 검사 규칙 "슬라이더입니다 : {required : true, rangelength : [18, 99]}". 하지만 여전히 필드에 오류 메시지 "유효하지 않음"이 표시됩니다. 그것을 고치는 방법? – Techappri

관련 문제