jquery验证：摆脱标签标签的错误

我很难使用jQuery验证。特别是，我试图从标签标签中删除错误信息并将其放入div中。jquery验证：摆脱标签标签的错误

我有5个单选按钮块。每块看起来是这样的：

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

我的jQuery代码看起来是这样的：

$(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" 
    }); 
});

问题在运行时，错误代码块看起来是这样的：

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

哪个这证明我尝试定位错误消息存在问题。任何想法为什么？

来源

2010-01-20 TWLATL

你知道，一个''标签，点击时，将焦点更改到相关的领域。这意味着默认情况下，单击该错误会将您带到有问题的字段。你确定禁用这种行为是个好主意吗？ – 2010-01-20 18:21:30

这些都是单选按钮组，每组有5个单选按钮。我并不担心改变重点。我担心错误的布局，这对于标签标签来说很困难。 – TWLATL 2010-01-20 22:13:45

编辑：我知道我不是直接回答你问的问题，但我想我明白你想克服的问题，并希望这有助于。我无法得到你在问题中描述的内容为我工作，因此选择了下面的选项。获得验证使用div或特定的类仅用于单选按钮比我想象的要困难得多。

我正在使用JQuery Mobile和UI，这里是我终于到达的解决方案。

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

脚本添加的方法，以验证仅当特定单选按钮的选择被选择来验证，并增加了自定义错误消息如果没有。新增规则和errorPlacement以验证它们是否合在一起，并在页面上的描述性段落之后显示错误消息。

它不会将HTML从标签更改为div，但它对我来说同样适用。

这是呈现的HTML输出。

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

而只是为了完整，这里是一个屏幕截图 enter image description here

来源

2012-02-15 14:38:31

jquery验证：摆脱标签标签的错误

回答

相关问题