We Keep Coding

Cursor jumps from input to input when .reportValidity() is being assessed as a variable

I am checking the validity of five unique inputs to prevent form submission when invalid inputs remain.
sE.addEventListener("input", (e) => {
if (
Number.isNaN(e.target.valueAsNumber) ||
sE.valueAsNumber >= Number(sE.max) ||
sE.valueAsNumber <= Number(sE.min)
) {
e.preventDefault();
calcButton.disabled = true;
} else {
calcButton.disabled = false;
}
This does appear to work to prevent the calculation button from being enabled, but only when the input (ie sE) is being looked at. This doesn't look at all the other inputs.
So I thought it would be better to try this:
sE.addEventListener("input", (e) => {
let reportS = sE.reportValidity();
let reportU = uE.reportValidity();
let reportV = vE.reportValidity();
let reportA = aE.reportValidity();
let reportT = tE.reportValidity();
console.log(reportS, reportU, reportV, reportA, reportT);
if (
Number.isNaN(e.target.valueAsNumber) ||
sE.valueAsNumber >= Number(sE.max) ||
sE.valueAsNumber <= Number(sE.min)
) {
e.preventDefault();
calcButton.disabled = true;
} else {
calcButton.disabled = false;
}
});
This gives me the appropriate true/false relationship between all five inputs. But, when you click on one of the inputs on the HTML form and enter a number, the cursor then jumps to the last selected input. This makes input impossible.
When I removed the let statements and put them outside of the function they do not call the correct true/false relationship as they aren't updated as each input has new data added. However, when the let statements are outside of the function, even though they do not accurately reflect the true/false relationship, the cursor does not jump from input to input.
I am very much a beginner so I am not sure what to look for when it comes to troubleshooting this strange phenomenon.
I made a JSBin for this https://jsbin.com/gowulec/edit?html,js,output
When you click all three checkboxes and then try to add data into the input.

USB Barcode scanner repeat scans without server call

Not sure if my terminology is correct on all of this. I know my code is not efficient either. Looking for functional over efficiency at this point. (just a teacher trying to solve logistical issues).
I have a webapp that we use to check students into and out of the library. Because of COVID, we are trying to touch the keyboard less and have a faster check-in process. To do this, we have a USB scanner that will scan student IDs.
My Webapp loads template html and then adds names etc to the different select elements. When a student checks in, the name appears on the other half of the window and waits for them to click the checkout next to their name. I believe this is done on what is called client side.
To add the barcode scanner, I added a form element with a text input. Is this the only way to have the barcode scanner interact with the client side?
<form><input type="text" id = "barcodeInput" size="1"></form>
I then have some jQuery that tests to see that the input is a barcode (Prefix and return key pressed), if so, the student ID number from the barcode is then put through a loop to find the matching id in the select options of student names (ids are stored in the values and student names are stored in the text). Default action is also prevented here
All of this works and I can get 1 student to add to the "checked in" panel of my app.
I cannot get the scanner to work on a second student. I think this has to do with the fact that I'm using the form input element and that might require a server call but I cannot do that since I need to have a growing list of students who are checked into the library.
I borrowed this and am currently using
$(document).ready(function() {
var barcode=""; //sets my variable
$(document).keydown(function(e) //looking to intercept the barcode scanner output
{
var code = (e.keyCode ? e.keyCode : e.which); //don't really know what this does since I borrowed this
if(code==13&&(barcode.substring(1,5)=="SCAN"))// Enter key hit & from scanner
{
e.preventDefault(); //stops the enter key from actually "running" and stops the barcode from going into the input field (I think)
barcode = barcode.slice(5);// remove the prefix so I am left with student number aka barcode
alert(barcode); //lets me know I'm getting the correct student number
processBarcode(barcode); //sends to process barcode
}
else if(code==9)// Tab key hit //I may not need these next 10ish lines
{
e.preventDefault();
alert(barcode);
}
else
{
e.preventDefault();
barcode=barcode+String.fromCharCode(code);
}
});
});
This find the student in the select element and then changes the select element to read that name and also posts the name on the "Who is checking in" Table cell
function processBarcode(barcode){
var name = "";
$("#studentNameSelect option").each(function(){ //runs through the select element that has all student names...the name is in the parameter "text" and student ID # is in the parameter val
if($(this).val()==barcode){ //looking to see if the student ID # matches the specific option in the select element
name = $(this).text(); //figure out the student name based on ID #
$(this).prop('selected', true); //set the select element to show this specific option
$("#selectedName").html(name); //puts student name in a table cell so they know they are picking the correct name
//$("#barcodeInput").trigger("reset"); //here I'm trying to get the form element input to reset so I can use it again...this didn't work so its commented out
$("#teacherNameSelect").focus(); //puts the focus onto the next select item so I can do other things
return false; //breaks the each loop once student name has been found
}
});
}
And then this is the code that moves the name onto the "checked in" panel so that the next student can check in
function buildAttendanceRow(stringPackage){ //this function takes info from the selection panel and builds a table row in the "I'm at the library" panel. Students click check out when they leave the library
console.log(stringPackage);
var package = JSON.parse(stringPackage); //receives a package of info from the selects, I do send this to a server function to email teachers that student arrived to the library...
console.log(package);
var html = "";
var hiddenId = new Date().getTime().toString(); //this cell is used to keep track of a specific instance of a student checked into the library so I can remove later and then mark in a backend spreadsheet database
var nameCell = '<td class="package" id="'+hiddenId+'">'+package.student+'</td>';
var checkOutButton = '<input type="button" value="Check Out" id="COButton">';
var checkoutButtonCell = '<td class="center">'+checkOutButton+'</td>';
html+="<tr>"+nameCell+checkoutButtonCell+"</tr>";
$("#checkedInTable").append(html); //puts the new table row into the checked in table
$('#'+hiddenId).data("package",package); //stores info so I can remove table row and update database
var lastTableRow = $('#checkedInTable tr:last');
var button = lastTableRow.find('#COButton');
//add the click function for removing row and sending checked out info to server for email and for database purposes
button.click(function(e){
var x = e.pageX;
var y = e.pageY;
var o = {
left: x,
top: y
};
$("#progressMonitor").show().offset(o);
$(this).prop("disabled",true);
var row = $(this).closest('tr');
var carrierCell =$('#'+hiddenId);
var d = new Date();
var payload = new Object(); //this object gets transferred to the server function, the user interface doesn't refresh here, it just has a dynamic html table built and shrunk as kids check in or check out
payload.checkInTime = carrierCell.data("package").checkInTime;
payload.timeIn = carrierCell.data("package").timeIn;
payload.student = carrierCell.data("package").student;
payload.teacherEmail = carrierCell.data("package").teacherEmail;
payload.teacherName = carrierCell.data("package").teacherName;
payload.reason = carrierCell.data("package").reason;
payload.checkOutTime = d;
payload.timeOut = d.getTime();
var stringPayload = JSON.stringify(payload);
row.hide();
alternateRowColors($("#checkedInTable"));
google.script.run.withSuccessHandler(emailAndRecordsSuccess).withFailureHandler(emailAndRecordsFailure).emailAndRecords(stringPayload);//calling the server function
});
var numRows = $("#checkedInTable tr" ).length;
if(numRows>2){
alphaSortTable(); //puts the student names in alpha order so it is easier for them to checkout of the library
}
alternateRowColors($("#checkedInTable"));
$("#progressMonitor").hide();
$("#barcodeInput").focus(); //here is me trying to get the scanner back into the input field so there is somewhere for the scanner data to go; I expected this to be all I needed to do, but at this point, even though the input is focused, the the scanner won't fire onto the document or into the field or anything like that
alert($("#barcodeInput").val()); //this is telling me that there is no value in the input field at this point, I thought there might be info stored here screwing up the scanner
}

The solution was to rebind a function to the document after my client side work was done.
Changed this into a named function:
$(document).ready(function() {
var barcode="";
$(document).keydown(function(e)
{
var code = (e.keyCode ? e.keyCode : e.which);
if(code==13&&(barcode.substring(1,5)=="SCAN"))
{
e.preventDefault();
barcode = barcode.slice(5);
processBarcode(barcode);
}else if(code==9)// Tab key hit
{e.preventDefault();
}else{
e.preventDefault();
barcode=barcode+String.fromCharCode(code);
}
});
});
Now I have:
function getBarcode(){
var barcode="";
$(document).keydown(function(e)
{
var code = (e.keyCode ? e.keyCode : e.which);
if(code==13&&(barcode.substring(1,5)=="SCAN"))
{
e.preventDefault();
barcode = barcode.slice(5);
processBarcode(barcode);
}else if(code==9)// Tab key hit
{e.preventDefault();
}else{
e.preventDefault();
barcode=barcode+String.fromCharCode(code);
}
});
and
$(document).ready(function() {
getBarcode();
}
and I can call
getBarcode();
anywhere to re-connect the document to be looking for the barcode scanner.

Validate all or none text fields in Kendo & dynamically remove messages

For the code below it looks for an empty field in the 4 required fields if the user enters the address/city/state/zip field. Then it loops to check if any of them are empty. If all 4 are empty, then validation passes. If All of them contain data, then it should pass. The only time it should fail is if 1-3 of them are empty.
var validator = $("#AddressInfoForm").kendoValidator(
{
rules: {
PayeeRequired: function (input) {
if (input.is("[name=Address]") || input.is("[name=City]") || input.is("[name=State]") || input.is("[name=Zip]")) {
var fieldsBlank = 0;
var requiredFields = ["Address", "City", "State", "Zip"];
for (var i = 0; i < requiredFields.length; i++) {
var val = $('#' + requiredFields[i]);
if (val.val() == "") {
fieldsBlank += 1;
}
}
if (fieldsBlank > 0 && fieldsBlank < 4 && input.val() == "")
input.addClass("inputfields-validation-error");
fieldsBlank = 0;
return false;
}
input.removeClass("inputfields-validation-error");
return true;
}
}
},
}
).data("kendoValidator");
The issue I'm having with this is that...
The previous validation messages do not disappear. They only disappear once I click into each input box. It should be checking dynamically across the board since all 4 fields are linked. This means if 3 fields are empty except one, then there should be errors for those 3 fields. Once I clear the 4th field, then all of those errors should hide. Unfortunately it only hides for the last field that I input into and then I need to individually click into each field.
Working code expectant...
Overall I am looking for improve/correct my code so that
Show the error message for the blank fields when more than zero and less than 4 are blank.
Dynamically update so that when I clear all the fields, it clears all the error messages. When I fill one, then the other 3 blank fields display errors.
No errors when all 4 are filled.
edit--------
utilizing
$("#Address, #City, #State, #Zip").on("change", function () {
isModified = true;
validator.validate();
});
Seems to work how I want; however, validator.validate() sets off the validation errors for all the other fields in my form. I only want the validation set off for the 4 fields Address, City, State, and Zip. Any ideas?

$("#Address, #City, #State, #Zip").on("change", function () {
validator.validateInput($("input[name=Address]"));
validator.validateInput($("input[name=City]"));
validator.validateInput($("input[name=State]"));
validator.validateInput($("input[name=Zip]"));
});
Seems to work well. Let me know if there's a better way to do this!

Using action in Javascript to submit form

I'm trying to submit a form using javascript. This is the code I've used to set the action to the form and then submit it. These 2 lines are in the onclick method defined for a button.
document.form1.action = fin_string;
document.forms["form1"].submit();
The problem here is that the fin_string gets replaced by something else when I do this. For eg. when fin_string = "http://www.gmail.com" this works, however when I keep fin_string as some other string (relative to the current path with attached parameters) it gets changed. alert(fin_string), shows the string correctly but when I use the string to set the action on the form and submit it, it gets changed.
This is what I want the fin_string to be (relative to the current path)
remote-service/FeedMergerManualTrigger?locales=en_GB-en_SG&deleteOutputFile=Y&localFilePath=c:/go/
but this is what the browser goes to when I assign it an action and submit the form.
remote-service/FeedMergerManualTrigger?LMN=UK&ZJ=SG&localResourcesMode=on&EUPath=c:/go/&delete_op=Y.
Any idea what's going on?

Have such code instead, it will assign hidden form elements instead of adding to the query string thus it won't get changed:
var fin_string = "remote-service/FeedMergerManualTrigger";
var arrData = {"locales": "en_GB-en_SG", "deleteOutputFile": "Y", "localFilePath": "c:/go/"};
var oForm = document.forms["form1"];
oForm.action = fin_string;
for (var key in arrData)
AddOrUpdate(oForm, key, arrData[key]);
//encodeURIComponent(arrData[key])
oForm.submit();
function AddOrUpdate(oForm, sName, sValue) {
var oInput = oForm.elements[sName];
if (!oInput) {
oInput = document.createElement("input");
oInput.type = "hidden";
oInput.name = sName;
oForm.appendChild(oInput);
}
oInput.value = sValue;
}

jQuery removing elements from DOM put still reporting as present

I have an address finder system whereby a user enters a postcode, if postcode is validated then an address list is returned and displayed, they then select an address line, the list dissappears and then the address line is split further into some form inputs.
The issue i am facing is when they have been through the above process then cleared the postcode form field, hit the find address button and the address list re-appears.
Event though the list and parent tr have been removed from the DOM it is still reporting it is present as length 1?
My code is as follows:
jQuery
// when postcode validated display box
var $addressList = $("div#selectAddress > ul").length;
// if address list present show the address list
if ($addressList != 0) {
$("div#selectAddress").closest("tr").removeClass("hide");
}
// address list hidden by default
// if coming back to modify details then display address inputs
var $customerAddress = $("form#detailsForm input[name*='customerAddress']");
var $addressInputs = $.cookies.get('cpqbAddressInputs');
if ($addressInputs) {
if ($addressInputs == 'visible') {
$($customerAddress).closest("tr").removeClass("hide");
}
} else {
$($customerAddress).closest("tr").addClass("hide");
}
// Need to change form action URL to call post code web service
$("input.findAddress").live('click', function(){
var $postCode = encodeURI($("input#customerPostcode").val());
if ($postCode != "") {
var $formAction = "customerAction.do?searchAddress=searchAddress&custpc=" + $postCode;
$("form#detailsForm").attr("action", $formAction);
} else {
alert($addressList);}
});
// darker highlight when li is clicked
// split address string into corresponding inputs
$("div#selectAddress ul li").live('click', function(){
$(this).removeClass("addressHover");
//$("li.addressClick").removeClass("addressClick");
$(this).addClass("addressClick");
var $splitAddress = $(this).text().split(",");
$($customerAddress).each(function(){
var $inputCount = $(this).index("form#detailsForm input[name*='customerAddress']");
$(this).val($splitAddress[$inputCount]);
});
$($customerAddress).closest("tr").removeClass("hide");
$.cookies.set('cpqbAddressInputs', 'visible');
$(this).closest("tr").fadeOut(250, function() { $(this).remove(); });
});

I think you're running into the same issue I recently ran into. If you have a variable pointing to 5 DIV's (example: var divs = $('.mydivs');) and then you call jQuery's remove() on one of the DIV's, like so: divs.eq(0).remove() you'll see that divs.size() still returns 5 items. This is because remove() operates on the DOM. However... if after calling remove() you then re-set your variable: divs = $('.mydivs'); and get the size you'll now get the correct size of the array. I've added sample code displaying this below:
// get all 5 divs
var d = $('.dv');
// remove the first div
d.eq(0).remove();
// you would expect 4 but no, it's 5
alert(d.size());
// re-set the variable
d = $('.dv');
// now we get 4
alert(d.size());