I have this html template in handlebars and like 52 input fields and i have this focusnext() function to focus on to the next input field regardless its required or not
html code from template
<form action="/newclient/{{accountName}}" onsubmit="return checkUSerCredentials();" method="POST">
<div class="row">
<h1 class="col s6" style="margin-top:4%;">NEW CLIENT</h1>
<div style="float: right; margin-top:4.5%;">
<button type="submit" id="save" class="waves-effect waves-light btn-large roundeed teal lighten-1">
<i class="material-icons left">done_all</i>Create New Agreement
</button>
</div>
</div>
<div class="row">
<div class="input-field col s4" onkeydown="focusNext(event)">
<input id="ledger_num" name="ledger_num"type="text" class="validate" required>
<label for="ledger_num"><b>Ledger Number</b></label>
</div>
<div class="input-field col s4" onkeydown="focusNext(event)">
<input id="file_num" name="file_num" type="text" class="validate" required>
<label for="file_num"><b>File Number</b></label>
</div>
<div class="input-field col s4" onkeydown="focusNext(event)">
<input id="agereement_date" placeholder="Example : 31/12/2021" name="agereement_date" type="text" class="validate" required pattern="^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$">
<label for="agereement_date">Agereement Date</label>
</div>
</div>
<div class="Row">
<div class="input-field Column" onkeydown="focusNext(event)">
<input id="client_name" name="client_name" type="text" class="validate" required>
<label for="client_name">Client Name</label>
</div>
<div class="input-field Column" onkeydown="focusNext(event)">
<input id="client_gaurdian" name="client_gaurdian" type="text" class="validate" >
<label for="client_gaurdian">Parent/Guardian</label>
</div>
<div class="input-field Column" onkeydown="focusNext(event)">
<input id="guarantor_name" name="guarantor_name" type="text" class="validate" >
<label for="guarantor_name">Guarantor Name</label>
</div>
<div class="input-field Column" onkeydown="focusNext(event)">
<input id="guarantor_gaurdian" name="guarantor_gaurdian" type="text" class="validate">
<label for="guarantor_gaurdian">Parent/Guardian</label>
</div>
.
.
.
.
.
.
</form>
and this is the function i use to focus on to the next input field
<script>
const inputField_ID_array = ["ledger_num","file_num","agereement_date","client_name","client_gaurdian",
"guarantor_name","guarantor_gaurdian".............]
function focusNext (e) {
try{
for(var i = 0; i<textArray.length; i++) {
if(e.keyCode === 13 && e.target.id === textArray[i]){
M.updateTextFields();
document.querySelector(`#${textArray[i+1]}`).focus();
}
}
}catch(error){}
}
</script>
this is inside the same template file inside a script tag
so the problem is when ever I prese enter instead of focusing on to the next input field i some how go to the next required input field and if remove the require condition from all input fields it simply sends the post request ( I don't know what is going on)
