jquery функция всегда пропускает проверку формы

Question

Я хочу проверить форму со стандартной html проверкой (обязательно), если форма действительна, тогда она должна выполнить эту функцию

она всегда пропускает проверку, когда я использую функцию, я также добавил обязательный параметр во входном теге, но все еще без проверки

$(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

Вам нужно изменить событие с click на submit как

 $('#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>