We Keep Coding

validation form, error message, submit button view

This is my first and most likely not the last question on stackoverflow. I need help, I have 2 popup windows, I need to validate data entry forms and display the text of the validation system error, but using js. Plus, you need to make the save and creat buttons so that they are not active if the form is not valid and vice versa.
I would appreciate your help!
https://codepen.io/andremoff/pen/zYLQOwN
At the moment, the error is displayed only on one popup window, the button works, but not quite correctly, since when opening the data is transferred to the form from the profile and initially they are valid, but the button is not active.

I have Multiple modal pop on my page , when i click submit, i am able to get the form values of the first modal pop but not others

I have created multiple optional modal pop ups. Each pop up has a form where i get user input .When i click the first submit button, i get the values, but when the user clicks on the search more details button to fill in a second or a third pop up when he clicks submit button, the forms suddenly dissappers as if it submits.
I am using Classes, i am relatively new to java script but i am feeling quite frustrated after trying this for several days now.
Someone please help.
The code is a available here
https://codesandbox.io/s/charming-sun-l4qo9?fontsize=14&hidenavigation=1&theme=dark

You should just listen for the submit event (check out the Event Reference section).
There's no submit-two or submit-three event in js.
So try getting rid of submit parameter in your ModalPopUp constructor and change the following line:
.addEventListener(this.submit, this.validate)
to:
.addEventListener('submit', this.validate)

Back button which goes back to filled in form

Is there a way to add a Back button which reloads a form with the inputs filled in?
I have a form with some input fields and a save (submit) button. When clicking submit, if the mandatory fields aren't filled in, a new page opens with a message. If I use the browser's Back button, I receive this message:
Confirm Form Resubmission
This webpage requires data that you entered earlier in order to be
properly displayed. You can send this data again, but by doing so you
will repeat any action this page previously performed. Press the
reload button to resubmit the data needed to load the page.
ERR_CACHE_MISS
So basically, it asks me to Refresh, and then confirm by clicking OK on a pop up window, after which the form reloads but with empty fields.
I have tried thinking of everything, but I can't find a solution. Thanks.

If it's possible, I would change the structure so that the form posts back to itself, and runs the validation of the mandatory fields. Then, if everything's ok, it will continue whatever processing is necessary. If there's a problem, it can show the form again, but in your code you will have access to the values already submitted, so you can pre-populate the form with these values and then display it to the user. It's a pretty standard design technique for this sort of thing.

adobe livecycle Message box displayed separately not in a single box

I am using Adobe Livecycle ES2. My code is fine but all my validations are being displayed as a list in one single message box and that's not what I want. I want them to display after the user leave each field that's being validated. I tried solution like File>Form Properties> Form Validation but I don't have the Form validation option. I am wondering if I can get it to work by javascript coding.

You can add field-specific JavaScript code to the exit event for each field. If the user enters a value that doesn't pass the validation, you can then script something (a messagebox, an alert popup or some text) to appear as the user tries to leave the field.
You may want to use softer coded validation (which warns the user that the field isn't correctly completed but still allows them to move elsewhere in the form) in the exit event and use harder/stricter validation at the end of the form, for example, before the form is submitted) so that the user can't submit the form without completing the necessary fields but they can still progress with later fields even if the earlier fields aren't complete.

After hitting SUBMIT show one more input field as popup for entering what has changed

I have a html form. After hitting the submit button, I want some kind of popup to appear where the user can enter what he has changed. And only after that has been done, ther form should be submitted to the web server.
It's for internal usage only, so design doesn't matter.

in spite of using submit button you just use <type="button" onclick="function1()">
in javascript section code:
function1(){
// here you can use a textbox or a prompt box to enter some value after which
// redirect to desired page using document.getElementById("myForm").submit();
}
I think this will solve your problem..

#user3077238, I can't comment yet, but Rupesh's answer will work.
You will want to call the original function that was in place when the user clicked submit within function1(){} after they provide input.
Now that function1(){} will be running before whatever code you had originally when the user clicked submit, you would just pass the input from the prompt to the original submit function.