Blocking AJAX call, what would be the perfered solution?

Question

First off, yes I know it's not the best kind of question. But I'm not really sure what I should be looking for to find references. So if someone would have a hint for that I'd be grateful as well. I guess it would be some kind of pattern/anti-pattern reference but I'm not sure what keywords to use to find the ones that are applicable.

What I'm currently facing is a form a user has to input data into and submit. Before the user submits the form I'd like to verify some data that requires a backend call. In order to do so (and block the submit) I'm using a jQuery and $.getJSON/$.ajax to fetch the data. I also verify it again later on when I process the data. It's just about giving the user feedback for his input.

I'm not sure whenever my current approach is a good one. I'm not sure how I would block the submit and verify the data I get from the call by using an async call or whenever I should do it this way at all. Another option would be to submit the form, verify the data and get the user back to the form with information on what is wrong. The downside to this would be that a "heavy" load is necessary.

1. So what could I do to use an asynchronous AJAX call to block the submit until I have verified the data?
2. Should I do this at all or should I rather just submit the form and verify/reject it before submitting it for processing?

Edit to make clear it's not a duplicate:

Here is the current function I'm using to check input values before submit. As you can see it would only abort/interrupt the submit if there is an error detected. I'm using $.ajax instead of $.getJSON as it's blocking. Typically this shouldn't have a huge impact as the query is rather quick and this probably would work "good enough" but I feel like it should be possible to make this better.

$("form").submit(function(event){
    abortSubmit = false;

    telephonePattern = new RegEx("^[0-9, ,\\-,+]*$")
    if(telephonePattern.test($("#inputTelephone").value) == false){
        abortSubmit = true;
        $("#helptext").text("The telephone field contains invalid numbers");
    }

    userExists = false;

    $.ajax({
        url: "<url>",
        dataType: "json",
        async: false,
        data: { user: $("#inputUsername").value }
    }).done(
        function(json){
            userExists = json;
        }
    )

    if(userExists.length > 0){
        abortSubmit = true;
        $("#helptext").text("That username already exists!");
    }

    if(abortSubmit){
        return false;
    }
});

Answer 1

$('.foo').on('click', function(e) {
    var validated_form = validateForm($(this).closest('form'));

    if (!validated_form) {
        e.preventDefault();
        // display validation messages, tooltips, etc
    };
});

.foo being the submit button

I assume you have a frontend validation function (in this example, it'd be named validateForm) which takes in the form jquery object. In that case, it should return either true (if everything is ok) or false (if things aren't ok). If things aren't ok, it won't submit the form. If they are ok, it will submit the form

If you absolutely must do the validation on the backend, then you could still use the preventDefault and send the form via ajax, validate it, then send a response. If the form was ok, you could trigger a custom event for that and then automatically submit the form (by creating an event listener for that specific event beforehand). If the form wasn't ok, you could again trigger a custom event (a different one) and display the validation messages and whatnot.