use JavaScript to press enter key to trigger pre-defined events

Question

I need to use JavaScript to update some data in a input field, and then programmatically to simulate a "Enter" keypress in order to fire up some events of that field to validate data.

Note that I didn't develop the site. I just do some add-on script for some customization. Therefore, I don't know what exact events attached to that field, or to be fired. All I know is if I do it manually, after key in item# and press enter, it will do something for validation.

I searched result here before. I have tried following 3 methods and all failed.

Any more ideas on how to solve?

#1:

const kexx = new KeyboardEvent('keypress', {
    bubbles: true, cancelable: true, keyCode: 13
});
    
inputEle.dispatchEvent(kexx);

#2:

    var exx = jQuery.Event("keypress");
    exx.which = 13; //choose the one you want
    exx.keyCode = 13;

$(inputEle).trigger(exx);

#3:

$(inputEle).val(itemnbrInputAry[i]).trigger('keyup');

Answer 1

"submit" event will trigger validation if something is invalid. The "submit" event can only be triggered on the <form> it doesn't originate from any other element.

Programmaically clicking a submit button with the .click() method will trigger a real "submit" event. All details about the "submit" event are in example below.

const io = document.forms.ui.elements;

const triggerSubmit = e => e.target.form.submit();

const clickSubmit = e => io.S1.click();

io.B1.onclick = triggerSubmit;

io.B4.onclick = clickSubmit;

:root {
  font: 1ch/1.5 'Segoe UI'
}

body {
  font-size: 2ch
}

form {
  font-size: 1.5rem
}

[type='text'],
button,
label {
  display: block;
  font: inherit;
  margin: 3px 5px
}

button {
  display: inline-block;
}

[type='text'] {
  width: 95%;
}

code {
  font-family: Consolas;
  font-weight: 900;
  color: green
}

kbd {
  font-weight: 900;
  color: #930
}

legend {
  font-size: 2rem
}

section {
  width: 90%;
  margin: 3px auto;
  font-size: 1.5rem
}

p {
  margin-top: 0
}

<form id='ui'>
  <fieldset>
    <legend>Submit Event</legend>
    <label>Once the inputs are valid, and focus is on either one of them, hitting the <kbd>Enter/Return</kbd> key triggers a "submit" event on the <code>form</code></label>
    <input name='A' type='text' placeholder='This does not have the [required] attribute'>
    <input name='B' type='text' placeholder='This has the [required] attribute' required>
    <label>Both buttons are functionally identical. They both trigger a "submit" event on the <code>form</code></label>
    <button id='S1'>Submit</button>
    <input id='S2' type='submit' value='Submit'>
  </fieldset>
</form>
<section>
  <button name='B1' form='ui' type='button'>#1</button>
  <button name='B2' form='ui' type='button'>#2</button>
  <button name='B3' form='ui'>#3</button>
  <button name='B4' form='ui' type='button'>#4</button>
  <p>Button <kbd>#1</kbd>, <kbd>#2</kbd>, and <kbd>#3</kbd> are associated to <code>form</code> by the <code>[form]</code> attribute. <kbd>#2</kbd> is inert but <kbd>#1</kbd> has an event handler bound to it called <code>triggerSubmit(e)</code> which executes
    an <i>"synthetic"</i> "submit" event using <code>.submit()</code> method. This synthetic submit event bypasses validation. Neither <kbd>#1</kbd> or <kbd>#2</kbd> could invoke a "submit" event normally because they have <code>[type="button"]</code>    attribute. <kbd>#3</kbd> does not have any <code>[type]</code> attribute and is associated to <code>form</code> so it will trigger a "submit" event.</p>
<p>Added <kbd>#4</kbd> button to simulate a "click" on a the first button in <code>form</code>. Programmaically clicking a submit button will trigger a real "submit" event.</p>
</section>