{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 一夜七次 的问题《Validate dynamic table rows on event listeners》','https://www.manongdao.com/q-1122050.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have an html table that I am populating via AJAX using jQuery dataTables. I have two forms on the page the first form validates the table parameters which works fine.
The second validation wraps around the entire table and my goal is to create a custom validation using tooltips unless there is another way I can use the submit form validate approach to validate multiple input[type='number'] and a datepicker in each row:
input[type=number] events - click, keyup the input field type=number
input[NAME=BUYDATE] (.hasDatePicker) event - onfocusout
How Should I trigger submission of the rows in a form?
A: Validate one row at a time where like elements use the NAME=ELEMENT
or
B: Validate the entire form using the submit form validation method?
This table is a dynamic order items utility
Here is my dataTable with a sample row:
<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>
Is it possible to use the name=value approach even though it goes against the typical DOM/WC3 guidelines where you have duplicate unique IDs/Names?
I guess it's identifying ALL duplicate unique IDs/Names if all rows highlight as red even though the target is the row in which the user has focus in.
NOTE:
Each row's last column have their own datepicker and if any of the other columns in that row have a value the date for that row must be supplied.
Subsequently, if the date is supplied and none of the row's other input fields aka [name='QTY'] in that row have a supplied value then I need an error to trigger.
Basically,
I have two types of rows identified by classes .RecordRow and .EmptyRow.
Each row's input[name='BUYDATE'] must have a valid date entered only when the user triggers one of the two event listeners.
Valid:
AND
Invalid:
AND
This is what I have so far
jQuery Validate:
$("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);
}
});
}
Finally,
Would anyone suggest wrapping each row with a form and validate that way? Seems like if I did that it would go against DOM guidelines as I need to use Id to use jQuery Validate. I have seen the use of multiple unique Ids on a single page and it can work in certain circumstances.
I decided to validate dynamic table rows one at a time using two event listeners where I reset the validation on two event listeners;
A) on input[type=number] click, keyup
&
B) on the datepicker input focusout, and keyup
I reset the validators using the inline rules ie:
$(".element").rules('add',{required: true});$(".element").rules('remove',"required");on the fly.I also create new
$("#id").datepicker()objects dynamically after the new rows are created.I also used
$(this).clone()to create dynamic row(s) upon processing the original row. I never thought the $.clone() API would be useful but I finally found an instance where it becomes useful.From what I understand the cloned objects are not bound to the original row's event listeners which I think depends on the API. I actually have proof where I clone a row with a nested input text of a datepicker.
I ultimately chose to remove the input textbox using the
jQuery.remove()function then re-create it and bind it to the datepicker API and then gave it a new id in order to make it work correctly.The problem now is the changeDate event is not binding to the new datepicker object and I recall that I attempted to remove the id and add a new id but the element was still bound to the original element's events that it was cloned from.
For example, the calendar pops up on the original element or the calendar itself does not display depending on how you choose to re-initialize the nested datepicker from the cloned row. (Please see the follow-up question I posted regarding the onchangeDate issue).
Also look out for which datepicker API you are referencing because there are many APIs for this functionality such as Bootstrap-datepicker and jQuery-datepicker which mine was from Metronic and is from the jQuery-datepicker API
I will show sample codes of this too in case someone comes across the same problem as me.
NOTE: I haven't tested in all browser a of 2/23/2017 so I will update upon testing.
Here is some sample code snippets for
$.rules(), $.datepicker(), and $.clone()APIs:Here is how I validate and process table rows WITHOUT using the
$("form").submit()technique.NOTE: My form wraps around my table so I do have a validate declaration, but I do NOT use the
form.submit()technique, rather I process based on the dynamic validation rules I reset and set on each event trigger.Here is how I created a new empty row using the $.clone() API from a row that was just processed:
I found that the key to creating dynamic datepicker is when you clone an object override the old id or even the element itself of the cloned object which an example can be viewed inside the ProcessRequest function:
NOTE: I had to play some games with the onChangeDate event listener in order to process rows on datepicker close. The only problem now is that the onChangeDate event listener is not being fired on the new cloned object. I tried to unbind the event and bind it but no luck atm.
NOTE: I have been trying to create dynamic bootstrap popout confirmation dialogs using the similar technique that I used with the datepicker using random Ids but I am having some errors where it is taking it twice to click input. If I fix I will post results.
I had an error with the datepicker where the first selection was not registering probably because it was nested inside an event? After doing some research I found that there was a similar issue with angular where user had to select date twice. I set a setTimeout inside the OnClose and it seemed to correct problem. I am going to use the same approach with the popouts and see how its goes. I hope I could help someone!
UPDATE: Thanks to artemisian I was able to solve the issue with the dynamic datepickers! Please see this post in regards to Cloning datepickers.
I then did this so I had reusable code:
/******************************************************************************* Wrapped in function to allow dynamic binding ********************************************************************************/