即使验证无效,jQuery表单也会发送

时间:2019-07-05 10:57:53

标签: javascript validation

我有一个需要通过axios提交的表单。

<form method="POST" action="{{ route('application.store') }}" id="myForm" novalidate="">
    <input name="name" type="text" class="form-control required" placeholder="Name" autocomplete="name" required>
    <div class="invalid-feedback">
       Please insert name
    </div>

    <input name="email" type="email" class="form-control required" placeholder="Email" autocomplete="email" required>
    <div class="invalid-feedback">
       Please enter email
    </div>

    etc. etc

    <button type="submit" class="btn">Send</button>
</form>

然后在我的JavaScript中,我有:

$('button[type="submit"]').click(function(e) {
    e.preventDefault();
    $("#myForm .required").each(function(e) {
        if ($.trim($(this).val()).length == 0) {
            $(this).addClass("is-invalid");
            $(this)
                .closest(".invalid-feedabck")
                .show();
        } else {
            $(this).removeClass("is-invalid");
            sendApplication();
        }
    });

    function sendApplication() {
       // here is the axios post method...
    }
});

因此,当输入之一为空时,将显示无效反馈消息,但无论如何都会提交表单,那么我在做什么错了?

0 个答案:

没有答案
相关问题