2010-01-20 11 views
2

jQuery 유효성 검사를 사용하는 데 어려움이 있습니다. 특히, 레이블 태그에서 오류 메시지를 제거하고 div 안에 넣으려고합니다.Jquery 유효성 검사 : 오류 라벨 태그 제거

나는 5 개의 라디오 버튼 블록을 가지고 있습니다. 각 블록은 다음과 같습니다

내 jQuery 코드는 다음과 같습니다
<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--> 

:

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

어느 오류 메시지를 배치하려는 나의 시도에 문제가 있음을 증명합니다. 어떤 아이디어?

+0

하는'

+0

이들은 모두 라디오 버튼 그룹이며 각 그룹에는 5 개의 라디오 버튼이 있습니다. 나는 초점을 바꾸는 것이 걱정되지 않는다. 레이블 태그로 인해 어려움을 겪고있는 오류의 레이아웃이 걱정됩니다. – TWLATL

답변

1

편집 : 귀하가 요청한 질문에 직접 답변하지는 않지만 귀하가 극복하려는 이슈를 이해하고 이것이 도움이되기를 바랍니다. 나는 당신이 내게 일하기 위해 당신의 질문에서 묘사하고있는 것을 얻을 수 없었고 그래서 아래의 옵션을 선택했다. 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

관련 문제