Not able tor redirect upon clicking on submit button in HTML form

Question

I have written a JS validation for one of the forms where I am expecting user to fill only few fields. Code as below. I am not expecting user to fill all the fields. The validation is happening fine but when clicked on Submit button, page is not redirecting to targeted one. Appreciate if someone can help me to find discrepancy here. Thanks in advance.

JS code:

 RenderDomConfig : function(e) {
        e.preventDefault();

        const discount_threshold = e.target.elements.discount_threshold.value;
        const discountThreshold = e.target.elements.discountThreshold.value;
        const cpThreshold = e.target.elements.cpThreshold.value;
        const markdownCpThreshold = e.target.elements.markdownCpThreshold.value;
        const minInventoryThreshold = e.target.elements.minInventoryThreshold.value;
        const variationMode = e.target.elements.variationMode.value;

        if (discount_threshold < 0 || discount_threshold > 100){
            alert("Please enter valid discount threshold between 0 to 100");
            e.target.elements.discount_threshold.focus();
            return false;
        }
        if (discountThreshold < -16 || discountThreshold > 100){
            alert("Please enter valid discount threshold between -16 to 100");
            e.target.elements.discountThreshold.focus();
            return false;
        }
        if (cpThreshold < -16 || cpThreshold > 100){
            alert("Please enter valid CP threshold between 0 to 100");
            e.target.elements.cpThreshold.focus();
            return false;
        }
        if (markdownCpThreshold < 0 || markdownCpThreshold > 100){
            alert("Please enter valid markdownCpThreshold threshold between 0 to 100");
            e.target.elements.markdownCpThreshold.focus();
            return false;
        }
        if (minInventoryThreshold < 0 || minInventoryThreshold > 100){
            alert("Please enter valid minimum Inventory Threshold between 0 to 100")
            e.target.elements.minInventoryThreshold.focus();
            return false;
        }
        if (variationMode == "disabled" || variationMode == "enabled" || variationMode == "" ){
            return true;
        }
        else{
            alert("Please enter valid variation mode: disabled or enabled");
            e.target.elements.variationMode.focus();
            return false;
        }
       return true;
    }
}

Call to JS code:

<form action='/setDomConfig?marketplaceID=<%=@marketplace%>&propertyName=<%=@property_name%>&componentName=<%=@component_name%>&simLink=<%=@sim_link%>'         onsubmit= "RenderDomConfigHelper.RenderDomConfig(event)" method="post">

Answer 1

You're preventing the form from submitting, with e.preventDefault();

One way of doing this is to change the submit button type to just button, then when you're done validating, you can submit the form.

DEMO

 // click event for the button document.f.validation.onclick = (e) => { // validation code... // when done submit the form. document.f.submit(); }; 

 <form name="f" action="success.php"> <input type="button" name="validation" value="Submit"> </form> 

document.f.submit() will trigger the onsubmit event of the form so you still have that code it won't work, better if you'd keep it empty or at least don't add e.preventDefault(); to it.

Answer 2

You dont need to define e.preventDefault(); .

Just make submit form event like this:

onsubmit = "return RenderDomConfigHelper.RenderDomConfig(event);"