Validation de formulaire MVC dans plusieurs onglets - saut automatique à l'onglet avec des erreurs de validation?

Question

J'ai une tabulation avec plusieurs onglets. Dans chaque onglet, j'ai un certain nombre de champs de texte pour l'utilisateur à entrer. La tabulation est entourée d'un formulaire et juste en dessous d'un bouton de soumission.

J'ai annoté la validation sur les attributs du modèle. Les validations fonctionnent correctement avec la validation Jquery. Cependant, si l'utilisateur fait une erreur de saisie dans un champ, passe à un onglet différent et appuie sur Envoyer, l'erreur apparaîtra dans l'onglet inactif et ne sera donc pas visible par l'utilisateur. Je voudrais que la validation Jquery soit automatiquement redirigée vers l'onglet avec l'erreur de validation, afin que l'utilisateur puisse le voir. Est-ce possible?

Answer 1

Je ne pense pas qu'il existe une solution prête à l'emploi pour cela. Mais vous pouvez le faire en javascript assez facile. Ce que vous faites est sur le formulaire soumettre vous regardez le contenu de chaque onglet, et si vous trouvez une erreur de validation, alors vous passez à cet onglet.

est échantillon ici:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myForm").submit(function() { 
      $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id); 
     }); 
    }); 
</script> 

Cet exemple suppose que l'identifiant de votre formulaire est myForm, que votre ID onglet est onglets. En outre, il suppose que vous avez ClientValidationEnabled = true et UnobtrusiveJavaScriptEnabled = true dans web.config. Cet extrait de code passera au premier onglet avec une erreur.

Ce code est juste un exemple et pourrait être refactorisé, mais il montre une idée.