I am filling a form automatically with a bookmarklet, but I fail to
trigger the validation of the fields. The code is

// fill form field
var my_username="user123";
document.getElementsByClassName("form-field")[0].firstChild.value=my_username;
// simulate click on the submit button
document.getElementsByClassName("form-field")[1].firstChild.click();

When I use the bookamarklet "user123" appears on the screen. The
problem is that this does not trigger the automatic validation that
would be triggered by real keypresses. With real keypresesses the
field gets validated, a tick appears in the screen and the submit
button gets enabled.

Any idea on how to trigger the validadtion and enable click on the
submit button?

The relevant HTML code for the form fields:

<div class="form-field">
<input aria-label="Username" autocomplete="off"
class="form-control ng-dirty ng-invalid ng-touched"
maxlength="40" minlength="6" name="username"
pattern="^(?=.*[a-zA-Z0-9]{1,})[a-zA-Z0-9_@.-]*$"
placeholder="Username" required="" type="text">
</div>

The relevant HTML code for the submit button:

<div class="row button-group mb-30">
<div class="form-field">
<div class="col-md-6 col-12 form-button"></div>
<div class="col-md-6 col-12 form-button">
<button class="btn btn-next float-right" type="submit"
disabled="disabled">
<span>Continue</span>
<span aria-hidden="true" class="material-icons">chevron_right</span>
</button>
</div>
</div>
</div>

On Thu, 29 Jul 2021 09:26:10 -0500, Alfred wrote:
> I am filling a form automatically with a bookmarklet, but I fail to
> trigger the validation of the fields. The code is
>
> // fill form field
> var my_username="user123";
> document.getElementsByClassName("form-field")[0].firstChild.value=my_username;
> // simulate click on the submit button
> document.getElementsByClassName("form-field")[1].firstChild.click();
>
> When I use the bookamarklet "user123" appears on the screen. The
> problem is that this does not trigger the automatic validation that
> would be triggered by real keypresses. With real keypresesses the
> field gets validated, a tick appears in the screen and the submit
> button gets enabled.
>
> Any idea on how to trigger the validadtion and enable click on the
> submit button?

HTML alone can not enable a disabled submit button, or disabled an enabled
one. Only JavaScript can do that. Meaning that the validation is done by
JavaScript. By an event handler code.

With some luck, bypassing the validation script and calling the form's
`submit()` may be sufficient enough if all form field values are already
valid. Or, manually enable the submit button, then call its `click()`
method. This will never work if the script does form data processing rather
than just form validation.

Since the script is triggered when a key is pressed, the event would be
either `input`, `keypress`, or `keydown`. If it's `input`, it can be
simulated by dispatching a newly created `input` event on the form field.

Otherwise it'll be difficult or may not be possible at all, since web
browsers do not allow keyboard input events to be simulated. What can be
done is to call the event handler directly. Assuming that the handler
function is accessible from the global context, and it does not check the
`isTrusted` property of the event.

JJ <jj4public@gmail.com> wrote:
> On Thu, 29 Jul 2021 09:26:10 -0500, Alfred wrote:
>> I am filling a form automatically with a bookmarklet, but I fail to
>> trigger the validation of the fields. The code is
>>
>> // fill form field
>> var my_username="user123";
>> document.getElementsByClassName("form-field")[0].firstChild.value=my_username;
>> // simulate click on the submit button
>> document.getElementsByClassName("form-field")[1].firstChild.click();
>>
>> When I use the bookamarklet "user123" appears on the screen. The
>> problem is that this does not trigger the automatic validation that
>> would be triggered by real keypresses. With real keypresesses the
>> field gets validated, a tick appears in the screen and the submit
>> button gets enabled.
>>
>> Any idea on how to trigger the validadtion and enable click on the
>> submit button?
>
> HTML alone can not enable a disabled submit button, or disabled an enabled
> one. Only JavaScript can do that. Meaning that the validation is done by
> JavaScript. By an event handler code.
>
> With some luck, bypassing the validation script and calling the form's
> `submit()` may be sufficient enough if all form field values are already
> valid. Or, manually enable the submit button, then call its `click()`
> method. This will never work if the script does form data processing rather
> than just form validation.
>
> Since the script is triggered when a key is pressed, the event would be
> either `input`, `keypress`, or `keydown`. If it's `input`, it can be
> simulated by dispatching a newly created `input` event on the form field.
>
> Otherwise it'll be difficult or may not be possible at all, since web
> browsers do not allow keyboard input events to be simulated. What can be
> done is to call the event handler directly. Assuming that the handler
> function is accessible from the global context, and it does not check the
> `isTrusted` property of the event.

Thanks very muhc for the suggestions which have shown me the way.
I have had a partial success.

I tried enabling the submit button manually with this code

document.getElementsByClassName("btn")[6].disabled=false;
document.getElementsByClassName("btn")[6].firstChild.click();

which in fact enabled the button and clicked it, but the form
submision failed due to the fields non being validated. On clicking
the button all the forms get highlighted in red.

So I have to validate each field with an input event. I have a
partial success. The first field gets validated and a tick appears at
its side. The second field does not get validated, despite having set
the right value.

var my_input_event = new Event('input', {
bubbles: true,
cancelable: true,
});

document.getElementsByClassName("form-field")[0].firstChild.value = "my_username";
document.getElementsByClassName("form-field")[0].firstChild.dispatchEvent(my_input_event);

document.getElementsByClassName("form-field")[1].firstChild.value = "abcd1234";
document.getElementsByClassName("form-field")[1].firstChild.dispatchEvent(my_input_event);

The HTML code for the two fields is very similar and I don't
understand why first one gets validated while the second not.

>> document.getElementsByClassName("form-field")[0].innerHTML
"<input aria-label="Username" autocomplete="off" class="form-control ng-dirty ng-touched ng-valid" maxlength="40" minlength="6" name="username" pattern="^(?=.*[a-zA-Z0-9]{1,})[a-zA-Z0-9_@.-]*$" placeholder="Username" required="" type="text">"

>> document.getElementsByClassName("form-field")[1].innerHTML
"<input aria-label="Password" class="form-control ng-untouched ng-dirty ng-valid" id="password" maxlength="20" minlength="8" name="password" placeholder="Password" required="" type="password">"

Any suggestion for validating the second field? should I use another
type of event? Maybe emulating keyboard input?

Alfred <invalid@invalid.invalid> wrote:
> Any suggestion for validating the second field? should I use another
> type of event? Maybe emulating keyboard input?

I have solved it myself at the end. It turns out that a 'blur' event
is enough to validate all fields.

var my_blur_event = new Event('blur');
document.getElementsByClassName("form-field")[0].firstChild.dispatchEvent(my_blur_event);

Many thanks to JJ for showing me the path.