[SalesForce] LWC – Submit Form after calling e.preventDefault()

I've integrated the web-to-case code (created from the salesforce) into a LWC.

My ideal flow is as follows:

1.User fills in the web-to-case form and presses submit button.

2.A new case gets created if all the validations pass.

3.Case should not be created if the validations fail.

What's actually happening:

1.After the user presses the submit button, I'm using event.preventDefault() to check the validations.

2.I'm not able to continue form submission after event.preventDefault(). I'm calling the this.template.querySelector('form').submit(); But it is not working

My HTML code:

<template>
<div>
    <form id="myForm" action="https://abc.my.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST" onsubmit={handleSubmit}> 
        <input type=hidden name="oid" value="XXXXXXXXXXXX">
        <label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
        <label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
        <label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>
        <label for="company">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" /><br>
        <input type="submit" name="submit">
    </form>
</div>

My JS Code:

export default class MyWebToCase extends LightningElement {

    handleSubmit(event){
        event.preventDefault();
        //Do Validations
        if(validations pass){
            this.template.querySelector('form').submit();
        }
    }
}

Best Answer

You only need to call event.preventDefault(); if validations fail. Something like

handleSubmit(event){
    let allGood = true;
    
    const email = this.template.querySelector('input[name=email]');
    if(email.value.length === 0){
        allGood = false;
    } 

    if(!allGood){
        event.preventDefault();
    }
}

Alternately, here is another/better way of doing the same. Instead of handling the submit event, you can call a function on the click of the Submit button, and update the validity of a field using the setCustomValidity function. If a form has invalid fields, it doesn't get submitted.

<form id="myForm" action="xxxxxxx" method="POST"> 
    <input type="submit" name="submit" onclick={handleSubmit} >
</form>

handleSubmit(event){
    const email = this.template.querySelector('input[name=email]');
    if(email.value.length === 0){
        email.setCustomValidity("I am expecting an e-mail address!");
    } else {
        email.setCustomValidity("");
    }    
}

Submitting a form using these methods refreshes the entire page. If you don't want that, and you need more control over what happens after a successful submit (like showing a toast message, showing a different web component, etc) you can use a fetch() call instead. Here is the sample code

Related Topic