1
jQuery dataTablesを使用してAJAX経由でデータを取り込むHTML表があります。私は最初のフォームがうまく動作するテーブルのパラメータを検証するページに2つのフォームがあります。イベントリスナーの動的表の行を検証します
2番目の検証はテーブル全体を囲み、目標は複数の入力[type = 'number']とdatepickerを検証するためにsubmit form validateアプローチを使用できる別の方法がない限り、ツールチップを使用してカスタム検証を作成することです各行の：
input[type=number]イベント - ]をクリックし、入力からkeyupフィールドタイプ=数
input[NAME=BUYDATE]（.hasDatePicker）イベント -
onfocusout私は、フォーム内の行の提出をトリガする方法は？提出フォーム検証方法を用い検証フォーム全体：
A：検証一つの行の要素が名前を使用するような時に= ELEMENT
又は
B？
このテーブルには、ここで
ダイナミック注文項目ユーティリティですサンプル行と私のdataTableです：
<form id="ITEMS">
<table id="table_001" class="xs-small table table-condensed" >
<thead>
<H5>Program: FRESH INCENTIVE</H5>
<H5>Customer: 330-990076-033 (B/C MANISTEE CLARK)</H5>
<p><font color="red">Delivery Days: Mon,Thu</font></p>
<tr>
<th></th>
<th class="hidden">
[
{ "size" : "lg",
"upper_hidden" : [],
"lower_hidden" : [1,2,3,4,5,6,7,8,9,10,11,12]
},
{ "size" : "md",
"upper_hidden" : [],
"lower_hidden" : [1,2,3,4,5,6,7,8,9,10,11,12]
},
{ "size" : "sm",
"upper_hidden" : [3,4],
"lower_hidden" : [1,2,5,6,7,8,9,10,11,12]
},
{ "size" : "xs",
"upper_hidden" : [3,4,5],
"lower_hidden" : [1,2,6,7,8,9,10,11,12]
}
]
</th>
<th>Item</th>
<th class='cupc'>UPC</th>
<th>Pack</th>
<th>Size</th>
<th>Description</th
<th>Mon<br>Qty</th>
<th>Tue<br>Qty</th>
<th>Wed<br>Qty</th>
<th>Thu<br>Qty</th>
<th>Fri<br>Qty</th>
<th>Sat<br>Qty</th>
<th>Start Date</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd"><td class="hidden-lg hidden-md"><span class="row-details row-details-close"><i class="fa fa-plus-square icon-large"></i></span></td><td class=" hidden">place holder</td><td><span class="EmptyRow itno live" title="ITEMNO:1525252" style="padding: 3px;">1525252</span></td><td><span class="UPC" title="UPC:010700807229">010700807229</span></td><td class="hidden-sm hidden-xs"><span class="pack" title="package qty:24">24</span></td><td class="hidden-sm hidden-xs"><span class="size" title="size:CT">CT</span></td><td class="hidden-xs"><span class="descrpt" title="desc:PAYDAY">PAYDAY</span></td><td><span title="Monday:"><input type="number" min="1" max="99" name="QTY" title="Qty must be between 1-99" value="" data-delday="1" data-dow="" class="qty non-day" maxlength="2"></span></td><td><span title="Tuesday:"><input type="number" min="1" max="99" name="QTY" title="Qty must be between 1-99" value="" maxlength="2" class="qty non-day" data-delday="2" data-dow=""></span></td><td><span title="Wednesday:"><input type="number" min="1" max="99" name="QTY" title="Qty must be between 1-99" value="" maxlength="2" class="qty non-day" data-delday="3" data-dow=""></span></td><td><span title="Thursday:"><input type="number" min="1" max="99" name="QTY" title="Qty must be between1-99" value="" maxlength="2" class="qty non-day" data-delday="4" data-dow=""></span></td><td><span title="Friday:"><input type="number" min="1" max="99" name="QTY" title="Qty must be between 1-99" value="" maxlength="2" class="qty delivery-day" data-delday="5" data-dow="5"></span></td><td><span title="Saturday:"><input type="number" min="1" max="99" name="QTY" title="Qty must be between1-99" value="" maxlength="2" class="qty non-day" data-delday="6" data-dow=""></span></td><td><span title="Start date for buying item"><input type="text" size="10" class="dp form-control-inline xs-small hasDatepicker" id="1" value="" name="BUYDATE" data-buydate=""><img class="ui-datepicker-trigger" src="/images/calendar.png" alt="Select a start buying date" title="Select a start buying date"></span></td></tr>
</tbody>
</table>
</form>
それは反するにもかかわらず、名前=値のアプローチを使用することが可能です一意のID /名前が重複している典型的なDOMガイドライン
私はすべての行を対象にユーザが集中している行があるにもかかわらとして赤いハイライトならばそれは問題ではないと思います
注：
各行の最後の列が持っている彼らのその行の他の列に値がある場合は、その行の日付を指定する必要があります。
その後、日付が指定されていて、その行の他の入力フィールドである[name='QTY']に値が指定されていない場合、トリガーするにはエラーが必要です。
基本的には、
私はクラス.RecordRowと.EmptyRowによって識別された行の2つのタイプがあります。
少なくとも1つのinput[name='QTY']は、行が.EmptyRowの場合は値を持ち、RecorRowの場合はすべてのQtysを削除する必要があります。
各行のinput[name='BUYDATE']は、ユーザーが2つのイベントリスナーのいずれかをトリガーしたときにのみ有効な日付を入力する必要があります。
有効：
と
無効：
と
これは私がこれまで持っているもの
jQueryの検証です：
$("input").on("blur keyup", function(){
row.children("td").each(function(){
$(this).children('input').each(function() {
if($(this).attr("name") === 'BUYDATE') && $(this).valid()){
//validate tds
}
});
});
});
form.validate({
focusInvalid: false,
onkeyup: function(element) { rule!!
var element_id = $(element).attr('name');
if (this.settings.rules[element_id]) {
if (this.settings.rules[element_id].onkeyup !== false) {
$.validator.defaults.onkeyup.apply(this, arguments);
}
}
},
rules: {
"BUYDATE": {
required: { depends:function(){
//iterate through rows here?
//this only validate onn submit
//I guess maybe on could trigger submit onkeyup
//or blur?
}
}
},
"DLOCN": {
required:{
depends: function(){
//iterate through rows here?
//this only validate onn submit
//I guess maybe on could trigger submit onkeyup
//or blur?
}
}
}
},
messages: { // custom messages
"EVENT": {
required: "Select a Program.",
HTH_SelectValue: "Select a Program."
},
"LOCN": {
HTH_SingleLOCN: "A single location must be selected when using this option to load items."
},
"DLOCN": {
required: "A customer location must be supplied when using this option to load items."
}
},
showErrors: function(errorMap, errorList) {
FormError.hide();
// Clean up any tooltips for valid elements
$.each(this.validElements(), function (index, element) {
element = $(element);
NoError_ToolTip(element);
});
// Create new tooltips for invalid elements
$.each(errorList, function (index, error) {
element = $(error.element);
message = error.message;
Error_ToolTip(element,message);
FormError.show();
});
},
invalidHandler: function (event, validator) { //display error alert on form submit
success.hide();
FormError.show();
$(document).scrollTop($(".form-body:first-of-type").offset().top);
},
submitHandler: function (form) {
success.show();
FormError.hide();
// Submit1(form,FormError,success);
}
});
}
最後に、
誰もがフォームを使って各行をラップしてその方法を検証することをお勧めしますか？私がそうしたように思えば、IDを使用してIDを使用する必要があるので、DOMガイドラインに反するだろう。jQuery Validate。私は1つのページに複数のユニークなIDを使用しているのを見てきました。