How to insert data to form text inputs with a content script when javascript validation is preventing it - javascript

I have a Firefox add-on which fetches personal data from a server, sends it to a content script in an active tab which then tries to match the data to any form input fields it finds.
I am looping over a NodeList using
const inputs = document.getElementsByTagName('input');
then using
method to find input elements with a first name or last name etc.
The script successfully finds personal data fields such as first and last name, telephone, address, email etc and sets the value attribute in each case to the required data value, the data appears as text in the input fields, but the form does not accept the inputs. It shows red for no-go.
It DOES accept the inputs if I manually click in the input box, add a space then remove it. In other words, I use mouse and keyboard to input. The input box goes green for OK. There seems to be some JavaScript or Angular validation going on, which does not recognize the content script setting the value attribute programmatically.
Is there a way to convince the validation script that data has been properly input?
An example input field is
placeholder="First Name"
autocomplete="shipping given-name"
class="ck-field-firstName ng-valid-validatenamesurname ng-touched ng-dirty ng-valid-parse ng-invalid ck-field-invalid"
ng-class="{ 'ck-field-invalid': (CheckoutState.MarkInvalidFields || formAddr.firstName.$dirty || formAddr.surname.$dirty) && formAddr.firstName.$invalid }"
I have tried using .focus() just before setting the element.value to the data value, but it does not work. Is there something which would mimic mouse click and typing, or some other way?


How to put default text in input fields while keeping JS form validation functionality

Some jQuery plugin checks whether my form fields (text input and select) have been filled out before I can submit the form. Now I want to add default values in the fields such as "please enter your name". But if I do that, the JS plugin will validate these fields whereas in fact the user didn't enter anything in them.
I want JS NOT to validate fields containing a default value. Is it possible?
Use Placeholder in your fields
<input type="text" name="username" placeholder="please enter your name">

Angular ng-model with required

I'm trying to create a simple input with html5 "required". I'm using placeholder, so I'd like the initial value of the input to be empty. I have the input bound to a ng-model that is initialized as empty (so the placeholder shows).
When I go to the page, it shows that input is required for the , which shouldn't show unless the user submits the form and the input is empty.
how can I do this:
<input type="text" required ng-model="name"> controller:
$ = "";
and not have the form think I am submitting an empty input?
One way of only validating when the user has actually interacted with your input element is to use $dirty to determine wether to show your error message. e.g.
<span ng-show="$dirty &&$error.required">
Name is required
I just created an example of form validation regarding to your question
This should be working:

Cannot get validation message to clear after updating input field value via JavaScript

I have a form that I am validating on the client-side using the jQuery Validation plugin. For brevity I have created a simple test case showing my issue. The form has a single text input field and a single hidden input field.
function testThis() {
alert('value before: ' + $("#testhidden").val());
alert('value after: ' + $("#testhidden").val());
<form name="testform" id="testform" method="post" action="">
Enter Text: <input type="text" id="testfield" title="test field is required" name="testfield" size="20" minlength="2" maxlength="10" required="required" />
<input type="hidden" id="testhidden" title="hidden field is required" name="testhidden" minlength="4" required="required" />
<p><input type="button" id="addvalue" name="addvalue" value="Add Value via JavaScript" onclick="testThis();" /></p>
<p><input type="submit" id="testbutton" name="testbutton" value="Submit Form" /></p>
Validation for both fields are that they are required and must be of a certain length; at least 4 characters for the hidden field and 2-10 characters for the text field. My caveat is that the hidden field is being updated via JavaScript after the form has been loaded to the DOM.
I have created a fiddle to demonstrate my problem. For this test I have added a button to simulate how I am modifying the hidden input's value via JavaScript. To test do this:
Try to submit the form without entering any text. You should get 2 validation errors.
Next enter text into the text input field and after entering at least 2 characters the first validation message should be hidden.
If you try to submit at this point it still will not because of the hidden field requirement.
Next click the Add value via JavaScript button. I am alerting the before and after values. At this point, once the hidden field has the correct data, I would like the validation message to be hidden but it is not.
At this point the form will submit because the validation criteria has been met but the error message is still displayed.
How can I get the validation message to hide once the hidden field contains the appropriate text?
Here is the simple validation call that I am using to go along with the test form above:
In case it matters I am using jQuery 1.11.1 and jQuery Validate 1.12.0
Although Pointy's answer does not solve the issue I think he is headed down the right path. I need some way to trigger the validation to fire after updating the hidden field. I have updated my fiddle now by adding a second input text field. I am also updating this input field via JavaScript. When I trigger the blur() event on this new field after updating via JavaScript it correctly hides the validation message. Doing the same thing on the hidden field however still does not work. It definitely has something to do with it being a hidden field...
Quote OP:
"I need some way to trigger the validation..."
The plugin provides a method called .valid() in which its sole purpose is to programmatically trigger validation, either on a single field or the entire form.
"It definitely has something to do with it being a hidden field"
The validation of a regular input field is normally triggered by events such as keyup and blur. Since you don't have those events on a hidden field, you simply need to use the .valid() method to manually trigger validation.
I've modified your function as follows and since you're using jQuery, also removed the inline JavaScript...
$('#addvalue').on('click', function() {
alert('value before: ' + $("#testhidden").val());
$("#testhidden").valid(); // <- manually trigger validation of this field
alert('value after: ' + $("#testhidden").val());
However, I don't understand why you'd need to validate something beyond the control of the user. In other words, since the hidden field is controlled programmatically, what's the point of applying validation to it in the first place?
You have to trigger the "change" event yourself to cause the validation code to re-run. Here is your fiddle with that change.
To make it work on jsfiddle, I changed the type of you're hidden input to a simple text type and actually added the style visibility:hidden to make it invisible for the user. With this approach, the validation plugin of jquery will evaluate you're input even if it is invisible for the user.
<input type="text" style="visibility:hidden" id="testhidden" title="hidden field is required" name="testhidden" minlength="4" required="required" />
Hope this answer to you're problem.

AngularJS show message about non-valid value in non-required field

I have next markup:
<input type="number" name="test" ng-model="data.test" step="any" ng-pattern="/^\d*[\.|,]?\d*$/" />
<span class="error" ng-show="!editForm.test.$valid || editForm.test.$error">Please, enter valid decimal number, such as 15.6</span>
When I am editing value in this input tag, message about non-valid value (in span tag) doesn't shown and after form submitting value will be set to null. When I am wrote required attribute to this input, message was shown, but this field is not required for me. How I can force AngularJS to show error message without required attribute?
1. Sorry, $error doesn't work properly
2. JSFiddle: Type in first field non-number, in next non-number too and then you can see different.
In your jsFiddle, in the first case, strangely if you use type="text", then the validation error shows up correctly and in the developer tools, you will see that ng-invalid-pattern is added to the input.
If you look into developer tools, in the second case too, if you give any invalid number, the class ng-invalid-required is added to the input rather than ng-invalid-pattern.
If there is no specific reason for using type=number, maybe just use type=text for the input control.

How can I make Alfresco YUI validate prepopulated input fields and avoid “keyup”?

I have a html form with some input fields that need validation:
<input type="text" id="hrs-edit-oib" name="oib">
I also have two validators on it. So with the new forms it works great. But with the prepopulated forms, it doesn't work.
I believe it is because the validators are set to work on a "keyup" event:
createEmployeeForm.addValidation("hrs-edit-oib", Alfresco.forms.validation.mandatory, null, "keyup");
Is there a way to tell the validator to process the form rigth away, if it has been prepopulated on the server side?
Here's an example:
I load a page with markup:
"<input type="text" name="myid" value="preloaded" id="myid" />
And lets say that the value of "myid" needs to be longer then two chars (which is the case here). But there was no keyup and my Save button is disabled until I click into that field and press tab or something.