event.preventDefault(); is not working on Firefox on form submit

Question

I had a form as below:

    <form name="attachment_form" id="id_attachment_form" class='class_attachment_form' action="/visit/something/" method="post" enctype="multipart/form-data">
        <table class="datagrid item_list" id="id_attachments">
            <tbody>
                    <td>
                        *Accession Number: <input id='acc_number' type="text" name="accession_number">
                    </td>                
            </tbody> 
            <input type="submit" value="Submit"/>

    </form>

<script>
$(document).ready(function () {
    $( "#id_attachment_form" ).submit(function( event ) {
        var accession_number = $('#acc_number').val();
        if (!accession_number)
            {
              alert("Please provide Accession Number");
              console.log('redirecting===>1');
              event.preventDefault();
              console.log('redirecting===>2');
            }
        else
            {    
                var url = '/visit/' + accession_number
                $(".class_attachment_form").attr("action", url);
                
            }
    });

});
    
</script>

So when I tried this on Firefox and submitted the form without value for Accession Number it was displaying the pop-up with some message, but it was also redirecting to url in the form action attribute event.preventDefault(); is not working, its not stopping the form redirection.

Similarly when I tried the same procedure on Google, the weird thing is even the pop-up was not displaying.

So why the event.preventDefault(); was not working, and why the pop up is working on Firefox and not working on Chrome?

Answer 1

Instead of using "event.preventDefault()" you should just use "return false".

Cheers