We Keep Coding

Form value set with JavaScript fails validation

I'm trying to create an autologin script for https://sso.verisk.com/login/default
I'm able to load the page and populate the Username and Password fields, but after clicking the Sign In button it will say "Please enter a username" and "Please enter a password". If I simply delete a character from the populated field, it will pass the validation.
To narrow it down, I've visited the page at https://sso.verisk.com/login/default and used the console to enter:
document.getElementById("okta-signin-username").value = "username"
document.getElementById("okta-signin-password").value = "password"
document.getElementById("okta-signin-submit").click()
As mentioned, this populates the Username and Password, but the validation doesn't detect field values until a character is either deleted or added manually. I've tested forms on other web sites with success so I'm not sure why this one is failing. Would greatly appreciate any points in the right direction!!

I believe the proper question could be "how can I submit a form programmatically"
The solution is this
Forms work like this, don't always think like a human when you deal with systems. The query selector is simply "form" because form is the only one form element in the entire document.

Parsley: How NOT to validate on certain events

I want to trigger the parsley-error on an input text field only at the time of 'focus out' and not on change event.
These are the steps I perform to produce the issue:
Enter some invalid characters in the text field. At this point of
time, the parsley-error is not trigerred (OK, as per my
requirements).
When I tab-out of the field, the parsley-error is trigerred and I
see the error on the tooltip of the text box (OK, as per my
requirements).
Now, when I again go back to the same text field and start entering
some more characters, the parsley error is trigerred (This is the
ISSUE).
I don't want the user to be bugged by the error appearing on the tooltip while he is making the changes. The error should be appeared only at the time of focus out but on this third step, the error is appearing at the time of 'change' as well.
I am not sure how can I tell Parsley to avoid some certain triggers!
Any suggestion?
Please note that the issue is not faced on the first step. The issue is faced only at the 3rd step mentioned above.
Here is my code:
<input type="text" class="form-control border-radius-6 onClickHideError"
id="passport_number" name="passport_number" required=""
maxlength="30"
placeholder=""
data-parsley-password-field="true"
data-parsley-trigger="focusout"
data-parsley-pattern="/^[a-zA-Z0-9]*$/"
data-parsley-required-message="${commonRequiredMsg}"
data-parsley-pattern-message="${passportInvalidMsg}"
autocomplete="off">

Parsley allows you to set data-parsley-trigger-after-failure to your choosing.

Overwrite input field after using preventDefault()

I have used the following code
$('#id1').keypress(function(e){
if ($('#mail_mobNumber').val().length > 9) {
e.preventDefault();
});
So, if I enter 10 numbers, I cannot enter anything more, and that is the goal.
But, on the other hand, after I enter 10 digits and if I select the entire field using Control + A, and tries to enter something, instead of the text getting replaced by what I am entering, nothing happens.
I understand that it is due to the impact of the above code, but is there anyway to achieve this, that is, allowing me to overwriting input after pressing Control + A.

You can simply use the maxlength attribute in the input tag instead.
<input type="email" maxlength="10">

How to disable jquery validation when editing an invalid field

I use jQuery.validate.js. I have multiple validation on one text field in a registration form. The validations are (1) cannot be blank. (2) must be an email. (3) cannot be an email already registered.
If I enter an email already registered, the error message shows up as expected. Then I start to delete text in the field. The error message for 'must be an email' pops up. When all text in the field is deleted, the error message for 'cannot be blank' pops up. This did not happen when I first edited the field before it's invalid.
I don't want the error messages show up when I'm editing the field after it is invalid. How can I do that?
Thanks!

Does this code fix your problem?
$(".selector").validate({
onkeyup: false
});

i think that's because HTML5 validation look for this Pattern:
[somthing]#[somthing]
and i think you should use novalidate attr in your form .
then try to use Email pattern like this:
pattern = " /^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/ "
but its better for understanding if you put your code in Question.

When typing in input and if not email with # and .com etc show error

I'm making this login field that is supposed to be more automatic and not manual like normal fields. I'm trying to show errors while you type and enter your details, and not after you have pressed "submit" and checked if the details is correct.
For example if you have not typed # or .com/.no/.co.uk in an email field: make error message automaticlly appear.
Or for example if you have typed only two letters and you need minium 6 letters: show error automaticlly appear.

I hard coded for you, there must some libraries doing this automatically for you, but you can start with here.
$('#inputName').keyup(function ()
{
YOUR VALIDATION CODE
}
you only need keyup function which means on text change for input.
HERE IS THE FIDDLE