jQuery驗證：擺脫標簽標簽的錯誤
[英]Jquery Validation: Get rid of label tag for error
問題描述
我在使用jQuery驗證時遇到了困難。 特別是，我試圖從標簽標簽中刪除錯誤消息，並將其放入div中。
我有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>
事實證明，這對我嘗試定位錯誤消息有問題。 有什么想法嗎？
1 個解決方案
解決方案1
1 2012-02-15 14:38:31
編輯：我知道我沒有直接回答您所提出的問題，但是我認為我理解您正在嘗試克服的問題，希望對您有所幫助。 我無法獲得您在問題中描述的內容對我有用，因此選擇了以下選項。 驗證僅使用單選按鈕來使用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>
該腳本將一種方法添加到驗證器，以僅在選擇了特定的單選按鈕選項時進行驗證，如果未選擇則添加自定義錯誤消息。 添加了rules和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 -->
為了完整起見，這是一個屏幕截圖
Jquery驗證，將錯誤消息放在現有元素中，而不是生成<label>標記</label>
[英]Jquery validation, put error message in an existing element instead of generating a <label> tag
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.