jquery validation de champ de changement de validation à la volée

Question

j'utilise la validation jquery et i ont le code ci-dessus

<script language="javascript"> 

$(document).ready(function() { 


    var validator=$("form#myForm") 
     .validate({ 
      submitHandler: function(form){ 
      alert("Submited"); 
      }, 
      invalidHandler: function(form, validator) { 
       var errors = validator.numberOfInvalids(); 
       if (errors) { 
        console.log(validator.invalidElements()); 
       } 
       }, 
      rules: { 
         field1: { required: true }    
        } 
    });  

}) 

function changeValidation() 
{ 
     var validationType=$("#nextFieldValidation").val(); 

     console.log("selected validation type is "+validationType); 

     switch(validationType) 
     { 
      case "integer": 
       console.log("set INTEGER validation"); 
       $("#nextField").rules("remove"); 
       $("#nextField").rules("add", { 
         digits: true 
        }); 
      break; 
      case "float": 
       console.log("set FLOAT validation"); 
       $("#nextField").rules("remove"); 
       $("#nextField").rules("add", { 
         number: true 
        }); 
      break; 
      default: 
       console.log("REMOVE validation"); 
       $("#nextField").rules("remove"); 
      break; 
     } 
} 
</script> 


<form id="myForm" name="form" action="action.php"> 
    <div><input type="text" name="field1" id="field1" /></div> 

    <div> 
     <select name="nextFieldValidation" id="nextFieldValidation" onclick="changeValidation();"> 
      <option value="">Select next filed validation</option> 
      <option value="integer">Integer</option> 
      <option value="float">Float</option> 
     </select> 
    </div> 

    <div><input type="text" name="nextField" id="nextField" /></div> 

    <div><input type="submit" /></div> 

</form> 

La validation ChampSuivant est contrôlé par une boîte de sélection. L'utilisateur décide si nextField est un entier ou un flottant.

Le code fonctionne correctement, mais j'ai besoin d'ajouter quelque chose pour améliorer l'accessibilité pour l'utilisateur.

Voici donc le problème.

Scénario:

utilisateur remplit field1 sélectionnez la validation entier et les remplissages avec 12,8 et cliquez sur Envoyer Il reçoit une erreur « S'il vous plaît saisir que des chiffres. » ce qui est correct

Après que changer la validation pour flotter.

Voici le problème. l'erreur "Veuillez entrer seulement des chiffres." est toujours là et son genre de confusion. Vous devez soumettre le formulaire pour continuer, mais pourquoi quelqu'un cliquez sur Envoyer quand obtenir une erreur.

Ainsi est-il possible en cas de changement de la valeur de la boîte de sélection revalider en quelque sorte la forme ou revalider que la nextFiled spécifique afin d'éliminer l'erreur

Merci

Answer 1

Je vous conseille de changer l'appel à « changeValidation() "se produit onchange, au lieu de onclick. onclick est susceptible de tirer lorsque vous cliquez sur le contrôle pour lui donner le focus, pas lorsque vous sélectionnez une option différente. Par conséquent, au moment où il exécute la validation, il est toujours défini comme un entier.

Alors, essayez de changer:

<select name="nextFieldValidation" id="nextFieldValidation" onclick="changeValidation();"> 

Pour:

<select name="nextFieldValidation" id="nextFieldValidation" onchange="changeValidation();">