ASP.Net Core app/JS validation: prompt user to update form, or exit page

I have an ASP.Net Core/Razor app with a simple form:

<form method="post" id="my_form">
  ...
</form>

I’m using the built-in client-side validation for things like <input ...required> or <input type="number" min="0" ...> (Microsoft includes jQuery validation in their MSVS project templates). That all works fine.

I’m also doing some additional, custom validation on certain fields. I’d like to give the user the option to either re-do the form, or exit the form altogether and redirect to a different page:

<script type="text/javascript">

// Form submit
$('#my_form').on('submit', function (e) {
    console.log('validateForm...');
    //debugger;

    // Check basic form validation
    let isValid = e.target.checkValidity();
    if (!isValid)
        return false;
    
    // Validate custom field
    let myCustomField = $('#myCustomField').val();
    if (myCustomField != 'xyz') {
        let response = confirm('MyCustom field is invalid: Update webform?');
        if (response) {
            return false;  // Return to webform
        } else {
            window.location.href = "./";  // Redirect to app's landing page
        }
        ...
        return true;
    }
});
</script>

PROBLEM:

window.location.href doesn’t redirect me immediately. The validation JS continues on, and the form is POSTed to the server.

Q: Should I use something like location.replace() instead? Or should I take a completely different approach?

Answer

To answer Ruikai Feng: no, Ajax would have defeated the whole purpose of what I was trying to do. I wanted to allow the user to optionally a) return to the web form to “correct” it, or b) leave the form altogether, and jump to a DIFFERENT page. Ajax wouldn’t have done this.

I decided to “punt”, and just have my JS validation function return “false” if it found anything wrong. This ALWAYS returns the user back to the web form. They can either “fix” the problem, or manually browse to a different page.