Why’s my form action still being triggered when validating the form despite using e.preventDefault()?

I’d like to display a message above the name field if the user submits a name with a length greater than 20. This means the form will not get submitted – in other words, the form’s action won’t be triggered.

I’ve tried almost every suggestion I could find to prevent the form action from being triggered upon form validation but nothing seems to be working.

I’ve hit a wall with this and can’t figure out what I’m doing wrong. How can rectify this?

html:

<form method="POST" id="form" action="/post.php">
  <span class="nameError"></span>
  <input type="text" class="name" name="name" placeholder="Name" required/>
            
  <input class="button" type="submit" value="Submit"/>
</form>

Here’s my jquery:

let name = $('.name');
let nameError= $('.nameError');

$(document).ready(function() {

$('input[type=submit]').on('click', function(e) {
    if (name.length > 20) {
        e.preventDefault();
        fullNameError.val("Too many characters!");
        return false;
    }
 });

});