CODEWITHSUNDEEP
javascriptecmascript-6
userName
userName

Reputation: 945

how to execute function after validation?

I have a form and validation for it. The problem is that I don't know how to check if the fields are filled in correctly and then send. How can I submit after all fields are filled in correctly?

const addBanksFunc = () => {
  addBankButton.addEventListener("click", (event) => {
    event.preventDefault();
    checkInputs();
  });
};

const setError = (element, message) => {...};

const setSuccess = (element) => {...};

const checkInputs = () => {
  if (bankName.value === "") {
    setError(bankName, "Some text");
  } else {
    setSuccess(bankName);
  }

  if (interestRate.value === "") {
    setError(interestRate, "Some text");
  } else {
    setSuccess(interestRate);
  }

  if (maximumLoan.value === "") {
    setError(maximumLoan, "Some text");
  } else {
    setSuccess(maximumLoan);
  }

  if (minimumDownPayment.value === "") {
    setError(minimumDownPayment, "Some text");
  } else {
    setSuccess(minimumDownPayment);
  }

  if (loanTerm.value === "") {
    setError(loanTerm, "Some text");
  } else {
    setSuccess(loanTerm);
  }
};

Upvotes: 1

Views: 499

Answers (3)

Vipul Panth
Vipul Panth

Reputation: 5801

Form element has checkValidity function documented over here,

Moreover you can create onSubmitHandler like this:

function handleSubmitHandler(event){
     
      const form = document.getElementById('form')
      if (form.checkValidity() === false) {
        alert('Validation field')
        event.preventDefault()
        event.stopPropagation()
        return
      }
      const formData = new FormData(form)
      const formProps = Object.fromEntries(formData)
      console.log('FORM DATA---', formProps)
      // DO YOU LOGIC HERE AND THEN USE
      form.submit()
      
   }
   
   
document.getElementById('button').addEventListener("click", handleSubmitHandler);
   
input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}
<Form id="form" method="POST" >
<input required name="name" />
<button id="button" variant="success" type="button">
  Submit
</button>
</Form>

More On Form Validation https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

Thanks

Upvotes: 0

Sergey Sosunov
Sergey Sosunov

Reputation: 4600

Just change your checkInputs signature, make it return true (form is valid) or false.

const checkInputs = () => {
  if (bankName.value === "") {
    setError(bankName, "Some text");
    return false;
  } else {
    setSuccess(bankName);
  }

  if (interestRate.value === "") {
    setError(interestRate, "Some text");
    return false;
  } else {
    setSuccess(interestRate);
  }
  ...

 return true;
}

and

const addBanksFunc = () => {
  addBankButton.addEventListener("click", (event) => {
    event.preventDefault();
    const isFormValid = checkInputs();
    if (isFormValid) {
        // submit the form here
    }
  });
};

Im actually not really sure about how to // submit the form with button onClick listener, probably it is better to use something like

orderForm.on('submit', function(event) {
    event.preventDefault();
    //some code here
    this.submit();
})

UPD: Due to comment question

Im not sure about what is the logic inside setError method you have, but if originaly you had it showing errors for all the fields -

const checkInputs = () => {
  let result = true;
  if (bankName.value === "") {
    setError(bankName, "Some text");
    result = false;
  } else {
    setSuccess(bankName);
  }

  if (interestRate.value === "") {
    setError(interestRate, "Some text");
    result = false;
  } else {
    setSuccess(interestRate);
  }
  ...

 return result;
}

Usually im using native attributes form validation with required or pattern or type or whatever attributes and then applying additional logical validation in same way you doing it.

Upvotes: 1

Dinesh
Dinesh

Reputation: 1027

Add an id or class for the form you want to submit. Lets say you have put an id="myForm" to the for you want to submit.

After all the checks, use the below code to submit the form through code.

document.getElementById("myForm").submit();

Note: put the submit button outside the form to avoid auto submission without the checks.

Upvotes: 0

Related Questions