JQuery Form Validator's toggleDisabled module does not work on buttons that are not type 'submit'

I have a form that uses the jquery form validator plugin (http://www.formvalidator.net/) to perform client side pre-submit validation. I have the toggleDisabled module activated so that the submit button is disabled until all required fields are filled out and formatted correctly. My jquery then sends the form data to a processing page via ajax. The storeData.php code stores the data in a table. On success, the ajax should open a modal. I have verified that the data is being stored in my table.

The issue lies (I suspect) with the form submit button. In order for my toggleDisabled module to work correctly, the button has to be of type 'submit.' But because of the nature of a submit button the success function of my ajax is effectively being bypassed so that the modal will never be displayed.

I have tested this by changing the submit button to a regular button. At the expense of my toggleDisabled module not functioning this way, my modal is displayed.

I have found many solutions here for enabling/disabling buttons and also for preventing form submit by changing the button type to button. However, I want to use the validator module to disable/enable the button because it is designed to listen to the data-validation attributes for my form fields. But it won't work unless it's a submit button. Is there a simple solution that I'm overlooking?

index.php

<form method="post" name="talentForm" id="talentForm">
<div class="form-row">
    <div class="col-auto redtext">*</div>
    <div class="col">
      <input type="text" id="first" class="form-control" placeholder="First name" data-validation="required">
    </div>
    <div class="col-auto">&nbsp;&nbsp;</div>
    <div class="col-auto redtext">*</div>
    <div class="col">
      <input type="text" id="last" class="form-control" placeholder="Last name" data-validation="required">
    </div>
</div>
<div class="row rowtm20"></div>
<div class="form-row">
    <div class="col-auto redtext">*</div>
      <div class="col">
        <input type="text" id="email" class="form-control" placeholder="E-mail" data-validation="email">
      </div>
    <div class="col-auto">&nbsp;&nbsp;</div>
    <div class="col-auto">&nbsp;&nbsp;</div>
    <div class="col">
      <input type="text" id="phone" class="form-control" placeholder="Phone">
    </div>
</div>                    
<div class="form-row">
    <button type="submit" id="registerButton" class="btn btn-primary mb-2 biggertext">Register</button>
</div>
</form>
<script>
$.validate({
  modules : 'security,toggleDisabled',
  showErrorDialogs : false
});

$('#registerButton').on('click', function(){
   var inputData = $('#last').val()+"|"+$('#fist').val()+"|"+$('#email').val()+"|"+$('#phone').val();
  $.ajax({
    type: 'post',
    url: 'storeEntry.php',
    data: {registration:inputData},
    success: function(response){
       if(response == "1"){
            $("#thankyouModal").modal("show");
        }
       else{
            alert("Error");
       }
    }     
  });
});
</script>   

storeEntry.php

if(isset($_POST)){
  $data = explode("|",$_POST['registration']);
  $addRegistration = "insert into talent (Last,First,email,Phone) values('".$data[0]."','".$data[1]."','".$data[2]."','".$data[3]."')";
  $entry = $dbConn->query($addRegistration) or die ("Error performing addRegistration query: ".mysqli_error($dbConn));
  if($entry){
    echo "1";
  } else{
    echo "0";
  }
}

Well, I found the answer. I added an argument to the click function and then called the preventDefault method, which will effectively 'turn off' the submit action of a submit button. This allows my toggleDisabled module in the validator to function correctly while also allowing my modal to appear and my ajax to execute. Hre is my revised click function:

$('#registerButton').on('click', function(e){
e.preventDefult();
var inputData = $('#last').val()+"|"+$('#fist').val()+"|"+$('#email').val()+"|"+$('#phone').val();
  $.ajax({
  type: 'post',
  url: 'storeEntry.php',
  data: {registration:inputData},
  success: function(response){
   if(response == "1"){
        $("#thankyouModal").modal("show");
    }
   else{
        alert("Error");
   }
  }     
 });
});