2010-01-20 5 views
2

J'ai du mal à utiliser la validation jQuery. En particulier, j'essaie de supprimer le message d'erreur de la balise label et de le placer dans un div.Jquery Validation: Se débarrasser de l'étiquette d'étiquette pour l'erreur

J'ai 5 blocs de boutons radio. Chaque bloc ressemble à ceci:

<div class="question-wrapper required"> 
    <div class="question-title required"> 
     <div class="question-box required">1.</div><h1>Question # 1</h1> 
    </div> 
    <div class="error-wrapper"> 
     <p><input type="radio" name="q1" class="q1 required" value="value1">Value 1</p> 
     <p><input type="radio" name="q1" class="q1 required" value="value2">Value 2</p> 
     <p><input type="radio" name="q1" class="q1 required" value="value3">Value 3</p> 
     <p><input type="radio" name="q1" class="q1 required" value="value4">Value 4</p> 
     <p><input type="radio" name="q1" class="q1 required" value="value5">Value 5</p> 
    </div><!--error-wrapper--> 
</div><!--question-wrapper--> 

Mon code jQuery ressemble à ceci:

$(document).ready(function() { 
    $("#music").validate({ 
     rules: { 
      q1: {required: true}, 
      q2: {required: true}, 
      q3: {required: true}, 
      q4: {required: true}, 
      q5: {required: true}, 
     }, 
     messages: { 
      q1: {required: "Select song 1"}, 
      q2: {required: "Select song 2"}, 
      q3: {required: "Select song 3"}, 
      q4: {required: "Select song 4"}, 
      q5: {required: "Select song 5"},  
     }, 
     errorElement: "div", 
     errorLabelContainer: "#messageBox", 
     wrapper: "span", 
     errorClass: "invalid" 
    }); 
}); 

Le problème est lorsqu'il est exécuté, le bloc de code d'erreur ressemble à ceci:

<div htmlfor="q1" generated="true" class="invalid" style="">Select song 1</div> 

Ce qui est prouvant problématique pour mes tentatives de positionner le message d'erreur. Des idées pourquoi?

+0

Vous savez, quand on clique dessus, balise ''

+0

Ce sont tous des groupes de boutons radio, chaque groupe ayant 5 boutons radio. Je ne suis pas inquiet de changer de concentration. Je m'inquiète de la disposition de l'erreur, qui s'avère difficile avec l'étiquette d'étiquette. – TWLATL

Répondre

1

EDIT: Je sais que je ne réponds pas directement aux questions que vous avez posées, mais je pense que je comprends les problèmes que vous essayez de surmonter et j'espère que cela vous aidera. Je n'ai pas pu obtenir ce que vous décrivez dans votre question pour travailler pour moi et j'ai donc choisi l'option ci-dessous. Obtenir validate pour utiliser divs ou une classe spécifique juste pour les boutons radio s'est avéré être plus difficile que je pensais que ce serait. J'utilise JQuery Mobile et l'interface utilisateur, voici la solution que j'ai finalement trouvée.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Application</title> 

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"> 
     <meta charset="utf-8"> 


     <link href="css/redmond/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css"> 
     <link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.0.1.min.css"> 
     <link type="text/css" href="jquery/mobiscroll-1.5.3.css" rel="stylesheet"> 

     <script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="jquery/jquery-ui-1.8.17.custom.min.js"></script> 
     <script type="text/javascript"> 
      $(document).bind("mobileinit", function() { 
       $.mobile.page.prototype.options.addBackBtn = true; 
      }); 
      $(document).bind("mobileinit", function() { 
       $.mobile.defaultPageTransition = 'none'; 
      }); 
      $(document).bind("mobileinit", function(){ 
       $.mobile.touchOverflowEnabled = true; 
      }); 
     </script> 
     <script type="text/javascript" src="jquery/jquery.validate.min.js"></script> 
     <script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $.mobile.fixedToolbars.setTouchToggleEnabled(false); 

        jQuery.validator.addMethod('ru18', function(value, element, params) { 
           return $("input[name='ru18']:checked").val() == 'yes'; 
        }, "Please visit a branch to open an account if you are not over the age of 18 and/or not a U.S. Citizen."); 

        jQuery.validator.addMethod('existing', function(value, element, params) { 
           return $("input[name='existing']:checked").val() == 'no'; 
        }, "This account application does not currently support existing customers."); 

        $("#myForm").validate({ 
         rules: { 
          ru18:{required:true,ru18:true}, 
          existing:{required:true,existing:true} 
         }, 
         errorPlacement: function(error, element) { 
         if (element.attr('name') === 'ru18') { 
           error.insertAfter('#pru18'); 
         } else if (element.attr('name') === 'existing') { 
           error.insertAfter('#pexisting'); 
         } 
         else { 
           error.insertAfter(element); 
         } 
        }, 
        debug:true 
       }); 

      }); 

     </script> 
     <style type="text/css"> 
      label.error {color:red} 
     </style> 
    </head> 
    <body> 
<div data-role="page" id="aPage"> 
    <div data-role="header" data-position="fixed"> 
     <h1>Before We Begin</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <form class="cmxform" id="myForm" method="get" action=""> 
      <p id="pru18">Are you at least 18 years of age?</p> 
      <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> 
       <input type="radio" name="ru18" id="ru18y" value="yes" checked="checked" class="required"> <label for="ru18y">Yes</label> 
       <input type="radio" name="ru18" id="ru18n" value="no"> <label for="ru18n">No</label> 
      </fieldset> 

      <p id="pexisting">Are you an existing Customer?</p> 
      <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> 
       <input type="radio" name="existing" id="existingy" value="yes"> <label for="existingy">Yes</label> 
       <input type="radio" name="existing" id="existingn" value="no" checked="checked" class="required"> <label for="existingn">No</label> 
      </fieldset> 
      <p><button type="submit" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="b">Begin New Application</button></p> 
     </form> 
    </div><!-- /content --> 
</div><!-- /aPage --> 

    </body> 
</html> 

Le script ajoute une méthode pour le validateur pour valider uniquement lorsqu'un choix de bouton radio spécifique est sélectionné et ajoute un message d'erreur personnalisé sinon. Les règles et errorPlacement sont ajoutés pour valider le lien et afficher le message d'erreur après le paragraphe descriptif sur la page.

Cela ne change pas le code HTML d'un label en un div, mais cela fonctionne aussi bien pour moi.

Voici la sortie HTML telle que rendue.

<div style="min-height: 320px;" class="ui-page ui-body-c ui-page-active" tabindex="0" data-url="aPage" data-role="page" id="aPage"> 
    <div style="top: 0px;" role="banner" class="ui-header ui-bar-a ui-header-fixed fade ui-fixed-overlay" data-role="header" data-position="fixed"> 
     <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">Before We Begin</h1> 
    </div><!-- /header --> 
    <div role="main" class="ui-content" data-role="content"> 
     <form novalidate="novalidate" class="cmxform" id="myForm" method="get" action=""> 
      <p id="pru18">Are you at least 18 years of age?</p><label class="error" generated="true" for="ru18">Please visit a branch to open an account if you are not over the age of 18 and/or not a U.S. Citizen.</label> 
      <fieldset class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal" data-role="controlgroup" data-type="horizontal"> 
       <div class="ui-radio"><input name="ru18" id="ru18y" value="yes" checked="checked" class="required error" type="radio"><label class="ui-btn ui-btn-up-c ui-corner-left ui-radio-off" data-theme="c" for="ru18y"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">Yes</span></span></label></div> 
       <div class="ui-radio"><input class="error" name="ru18" id="ru18n" value="no" type="radio"><label class="ui-btn ui-corner-right ui-controlgroup-last ui-btn-up-c ui-radio-on ui-btn-active" data-theme="c" for="ru18n"><span class="ui-btn-inner ui-corner-right ui-controlgroup-last"><span class="ui-btn-text">No</span></span></label></div> 
      </fieldset> 

      <p id="pexisting">Are you an existing Customer?</p><label class="error" generated="true" for="existing">This account application does not currently support existing customers.</label> 
      <fieldset class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal" data-role="controlgroup" data-type="horizontal"> 
       <div class="ui-radio"><input class="error" name="existing" id="existingy" value="yes" type="radio"><label class="ui-btn ui-corner-left ui-radio-on ui-btn-active ui-btn-up-c" data-theme="c" for="existingy"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">Yes</span></span></label></div> 
       <div class="ui-radio"><input name="existing" id="existingn" value="no" checked="checked" class="required error" type="radio"><label class="ui-btn ui-btn-up-c ui-corner-right ui-controlgroup-last ui-radio-off" data-theme="c" for="existingn"><span class="ui-btn-inner ui-corner-right ui-controlgroup-last"><span class="ui-btn-text">No</span></span></label></div> 
      </fieldset> 
      <p><div aria-disabled="false" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-b" data-theme="b"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Begin New Application</span><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></span><button aria-disabled="false" class="ui-btn-hidden" type="submit" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="b">Begin New Application</button></div></p> 
     </form> 
    </div><!-- /content --> 
</div><!-- /aPage --> 

Et juste pour être complet, voici une photo écran enter image description here

Questions connexes