jquery function always skips form validation

Question

I want to validate a form with the default html validation (required) if the form is valid, then it should execute this function

it always skips validation when i use the function i also added the required parameter in the input tag, but still no validation

$(document).ready(function(){
    $('#send-form').click(function(e) {
      e.preventDefault();
      mail_url = 'mailto:office@test.at?Subject=' + 'Anfrage' + '&Body=' + $('#exampleFormControlTextarea1').val() + '%0D%0A' + '%0D%0A' +$('#inputVorname').val() + '%0D%0A' + $('#inputNachname').val() + '%0D%0A' + $('#inputAdresse').val() + '%0D%0A' + $('#inputPlz').val() + '%0D%0A' + $('#inputOrt').val() + '%0D%0A' + $('#inputTelefon').val() + '%0D%0A' + $('#email').val()
      window.location = mail_url
  });
});

HTML:

<form class="formular" id="kontakt">
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="inputVorname">*Vorname:</label>
            <input type="text" class="form-control" id="inputVorname" placeholder="Vorname" name="vorname" required>

        </div>
        <div class="form-group col-md-6">
            <label for="inputNachname">*Nachname:</label>
            <input type="text" class="form-control" id="inputNachname" placeholder="Nachname" required>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="inputAdresse">*Adresse:</label>
            <input type="text" class="form-control" id="inputAdresse" placeholder="Adresse" required>
        </div>

        <div class="form-group col-md-2">
            <label for="inputPlz">*PLZ:</label>
            <input style="width: 80px;" type="text" class="form-control" id="inputPlz" placeholder="PLZ" required>
        </div>

        <div class="form-group col-md-4">
            <label for="inputOrt">*Ort:</label>
            <input type="text" class="form-control" id="inputOrt" placeholder="Ort" required>
        </div>
    </div>
    <div>

        <div class="form-group" id="head-textarea">
            <label for="exampleFormControlTextarea1">Fragen/Anmerkungen:</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="10"
                style="border:solid 2px black; border-radius: 0px;" maxlength="400"></textarea>
        </div>
        <p>blablablablablalblablablablablablabl</p>
        <div class="checkbox">
            <label class="checkbox-inline"><input type="checkbox" value="zustimmen" required>
                <p style="text-align: justify;">ksdjkfljksdfjklsdfjksdölflsdkfl</p>
            </label>
        </div>
    </div>
    <button id="send-form" value="Submit" type="submit"
        class="btn btn-primary btn-lg btn-block form-submit">ABSCHICKEN</button>
    </div>
    </div>
</form>

Answer 1

You need change event from click to submit as

 $('#send-form').submit(function(e) {}

$(document).ready(function(){
    $('#send-form').submit(function(e) {
      e.preventDefault();
      mail_url = 'mailto:office@test.at?Subject=' + 'Anfrage' + '&Body=' + $('#exampleFormControlTextarea1').val() + '%0D%0A' + '%0D%0A' +$('#inputVorname').val() + '%0D%0A' + $('#inputNachname').val() + '%0D%0A' + $('#inputAdresse').val() + '%0D%0A' + $('#inputPlz').val() + '%0D%0A' + $('#inputOrt').val() + '%0D%0A' + $('#inputTelefon').val() + '%0D%0A' + $('#email').val()
      window.location = mail_url
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="formular" id="kontakt">
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="inputVorname">*Vorname:</label>
            <input type="text" class="form-control" id="inputVorname" placeholder="Vorname" name="vorname" required>

        </div>
        <div class="form-group col-md-6">
            <label for="inputNachname">*Nachname:</label>
            <input type="text" class="form-control" id="inputNachname" placeholder="Nachname" required>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="inputAdresse">*Adresse:</label>
            <input type="text" class="form-control" id="inputAdresse" placeholder="Adresse" required>
        </div>

        <div class="form-group col-md-2">
            <label for="inputPlz">*PLZ:</label>
            <input style="width: 80px;" type="text" class="form-control" id="inputPlz" placeholder="PLZ" required>
        </div>

        <div class="form-group col-md-4">
            <label for="inputOrt">*Ort:</label>
            <input type="text" class="form-control" id="inputOrt" placeholder="Ort" required>
        </div>
    </div>
    <div>

        <div class="form-group" id="head-textarea">
            <label for="exampleFormControlTextarea1">Fragen/Anmerkungen:</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="10"
                style="border:solid 2px black; border-radius: 0px;" maxlength="400"></textarea>
        </div>
        <p>blablablablablalblablablablablablabl</p>
        <div class="checkbox">
            <label class="checkbox-inline"><input type="checkbox" value="zustimmen" required>
                <p style="text-align: justify;">ksdjkfljksdfjklsdfjksdölflsdkfl</p>
            </label>
        </div>
    </div>
    <button id="send-form" value="Submit" type="submit"
        class="btn btn-primary btn-lg btn-block form-submit">ABSCHICKEN</button>
    </div>
    </div>
</form>