How to submit after jquery regex validations complete?

Question

How can I stop submit button if this UserRegistration() function not complete its regex validations and .ajax callback. Just only stop submit button not show the success result with Ajax. After validations complete submit can send data. I try to use some methods like preventing event returning true or false but can't do it. Or maybe I'm doing something wrong. Here is my code:

function UserRegistration() {   

    //Input validations
    $('.validate-inputs').keyup(function (event) {
        
        event.preventDefault();     

        if ($(this).attr('id') == 'fullname') {
            if ($(this).val() == "") {
                $("#vfullname").html("Please enter a name.");
                $("#vfullname").removeClass();
                $("#vfullname").addClass("text-warning");
                $(this).removeClass();
                $(this).addClass("form-control form-control-user border-warning");
            }
            else if (!isValidFullname($(this).val())) {
                $("#vfullname").html("Please enter a valid name.");
                $("#vfullname").removeClass();
                $("#vfullname").addClass("text-info");
                $(this).removeClass();
                $(this).addClass("form-control form-control-user border-info");
            } else {
                $("#vfullname").html("");
                $(this).removeClass();
                $(this).addClass("form-control form-control-user border-success");
            }
        } 
    }); 

    //Ajax validations
    $("#register-form").keyup(function (event) {

        event.preventDefault();

        var fullname = $("#fullname").val();
        var username = $("#username").val();
        var email = $("#email").val();
        var password = $('#password').val();

        $.ajax({
            type: "POST",
            url: "registercontrol.php",
            data: {
                fullname: fullname,
                username: username,
                email: email,
                password: password
            },
            dataType: "json",
            success: function (result) {

                if (result.une) {
                    $("#vusername").html(result['une']);
                    $("#vusername").removeClass();
                    $("#vusername").addClass("text-danger");
                    $("#username").removeClass();
                    $("#username").addClass("form-control form-control-user border-danger");
                }

                if (result.me) {
                    $("#vemail").html(result['me']);
                    $("#vemail").removeClass();
                    $("#vemail").addClass("text-danger");
                    $("#email").removeClass();
                    $("#email").addClass("form-control form-control-user border-danger");
                }
            }
        });
    }); 
}

Html form

<script type="text/javascript" src="validations.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        UserRegistration();
    })
</script>

<form id="register-form" role="form" method="post" action="registercontrol.php" autocomplete="off">    
                                    
    <input type="text" name="fullname" id="fullname" class="form-control form-control-user validate-inputs" placeholder="Name">            
    <span id="vfullname"></span>                                                                
       
                                            
    <input type="text" name="username" id="username" class="form-control form-control-user validate-inputs" placeholder="Username">
    <span id="vusername"></span>                                    
    
                                    
    <input type="email" name="email" id="email" class="form-control form-control-user validate-inputs" placeholder="Email">
    <div id="vemail"></div>                                 
                                                    
    <input type="password" name="password" id="password" class="form-control form-control-user validate-inputs" placeholder="Password">
    <span id="vpassword"></span>                                        
              
                                    
    <input id="submit" type="submit" name="submit" value="Create an Account" class="btn btn-primary btn-user btn-block">                                
</form>

Thank you

Answer 1

The ideal way to stop user to click submit button is to use disabled on the your submit button

Initially disable the button when page loads - once your ajax validation is completed just enable the submit button n ajax success function for the user to click and submit the registration form

You can do the same thing for all the if's condition just disbale the button if validation criteria is not met.

Run snippet below to see to see it working.

function UserRegistration() {

  //Input validations
  $('.validate-inputs').keyup(function(event) {

    event.preventDefault();

    if ($(this).attr('id') == 'fullname') {
      if ($(this).val() == "") {
      
         //Disable submit button
        $('#submit').prop('disabled', 'disabled')
        
        
        $("#vfullname").html("Please enter a name.");
        $("#vfullname").removeClass();
        $("#vfullname").addClass("text-warning");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-warning");
        //}
        /* else if (!isValidFullname($(this).val())) {
            $("#vfullname").html("Please enter a valid name.");
            $("#vfullname").removeClass();
            $("#vfullname").addClass("text-info");
            $(this).removeClass();
            $(this).addClass("form-control form-control-user border-info"); */
      } else {
        //Enable Submit button
        $('#submit').prop('disabled', false)
        
        $("#vfullname").html("");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-success");
      }
    }
  });

  //Ajax validations
  $("#register-form").keyup(function(event) {

    event.preventDefault();

    var fullname = $("#fullname").val();
    var username = $("#username").val();
    var email = $("#email").val();
    var password = $('#password').val();

    $.ajax({
      type: "POST",
      url: "registercontrol.php",
      data: {
        fullname: fullname,
        username: username,
        email: email,
        password: password
      },
      dataType: "json",
      success: function(result) {
      
        //Enable submit button
        $('#submit').prop('disabled', false)
        
        if (result.une) {
          $("#vusername").html(result['une']);
          $("#vusername").removeClass();
          $("#vusername").addClass("text-danger");
          $("#username").removeClass();
          $("#username").addClass("form-control form-control-user border-danger");
        }

        if (result.me) {
          $("#vemail").html(result['me']);
          $("#vemail").removeClass();
          $("#vemail").addClass("text-danger");
          $("#email").removeClass();
          $("#email").addClass("form-control form-control-user border-danger");
        }
      }
    });
  });
}

UserRegistration()

input {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="register-form" role="form" method="post" action="registercontrol.php" autocomplete="off">

  <input type="text" name="fullname" id="fullname" class="form-control form-control-user validate-inputs" placeholder="Name">
  <span id="vfullname"></span>


  <input type="text" name="username" id="username" class="form-control form-control-user validate-inputs" placeholder="Username">
  <span id="vusername"></span>


  <input type="email" name="email" id="email" class="form-control form-control-user validate-inputs" placeholder="Email">
  <div id="vemail"></div>

  <input type="password" name="password" id="password" class="form-control form-control-user validate-inputs" placeholder="Password">
  <span id="vpassword"></span>


  <input id="submit" type="submit" name="submit" value="Hesap Oluştur" class="btn btn-primary btn-user btn-block" disabled>
</form>