Need some help with a form.

Need some help. After 3 days of working and trial and error, i finally got my form to work and submit my data correctly. I am down to 2 problems i am having now that i can’t seem to fix.

(A) Even though i have the user input fields set as required, the form will still submit even if there is an error, and my success message i cannot get that to show no matter what i try.

(B)The second is after the form submits the elements that populate the form,

  1. the check box doesn’t reset, it stays checked.
  2. I have 3 code populated text fields (first name, last name and current plan), after the form submits, these fields go blank unless you refresh the page and I need them to be on the page.

I can’t seem to find any information on how to address this. I tried to use the dataset refresh but it doesn’t seem to work and i get no errors in preview an nothing in the console, so I don’t think my console.log catch error code is correct somehow.
Here is my code, any input would be great.

//submit code for form to both databases, working, hook added in data.js
$w.onReady( () => {
let firstName = $w(’ #textUserName ‘).text
let lastName = $w(’ #textUserLast ‘).text
let title = $w(’ #emailtext ‘).text
let date = $w(’ #datePicker1 ‘).value
let currentPlan = $w(’ #planLevel ‘).text
let newPlan = $w(’ #dropdown1 ‘).value
//highlight missing information
let req1 = $w(" #email “).required = true;
let req2 = $w(” #checkbox1 “).required = true;
let req3 = $w(”#dropdown1").required = true;
$w(" #dataset2 ").onReady( () => {
$w(’#dataset2’).onBeforeSave(()=>{
$w(“#dataset2”).setFieldValues( {
“firstName” : $w(‘#textUserName’).text,
“lastName” : $w(‘#textUserLast’).text,
“title” : $w(‘#email’).value,
“date” : $w(‘#datePicker1’).value,
“currentPlan” : $w(‘#planLevel’).text,
“newPlan” : $w(‘#dropdown1’).value,
})
$w(’ #submit ‘).onClick(function () {
$w(’#dataset2’).save()
.then( () => {
console.log(“Form Submitted”);
$w(“#dataset2”).refresh()
.then( () => {
console.log(“Done refreshing the dataset”);
$w(“#email”).updateValidityIndication();
$w(“#dropdown1”).updateValidityIndication();
$w(“#checkbox1”).updateValidityIndication();
$w(’ #sent ‘).show();
$w(’ #error ‘).hide();
})
} )
.catch( (err) => {
console.log(err);
$w(’#error’).show();
$w(‘#sent’).hide();
} );
})
})
})
})

A) Just make sure that each of the user input elements have required checkbox ticked in it’s settings and it isn’t needed in the code.

B) Make sure that in the checkbox element settings, that there isn’t a default box ticked, have none choosen at start.

As for the user inputs, once they have been submitted, the form will reset to default.

If you’ve nothing in the placeholder text on these three elements, then it will be blank again.

The checkbox has none chosen at the start, the text elements are populated with code but after the form submits these populated fields become blank, they do not show the populated item anymore. For example, first name text box is populated from a query on my database. That same field is also being used as an input for the form. once the form submits, the name text box is blank.