javascript - 在发送 ajax 提交之前验证表单

Question

编辑:所以澄清一下，这是在引导模式内部，按钮位于表单外部的页脚中。我无法执行普通的表单提交，因为我必须将提交按钮的位置更改为表单内部，但我不想这样做 - 它需要保留在页脚内部。

我试图检查以确保在通过ajax提交表单之前填写了必填字段，但我遇到的所有答案都说我应该使用 jquery .validate() 插件，但我不这样做想要使用任何其他插件。这可以做到吗？

HTML:

<form id="event-form">
        <div class='row'>
            <div class="form-group col-xs-12">
                <label class="form-label" for="event[title]">Event Name</label>
                <div>
                    <input type="text" name="event[title]" class="form-control" value="" required />
                </div>
            </div>
        </div>
        <div class="row" id="day-start">
            <div class="form-group col-xs-6">
                <label class="form-label" for="event[all_day]">All day event?</label>
                <div>
                    <select class='form-control' name='event[all_day]' id='all_day' required>
                        <option value='0' selected>No</option>
                        <option value='1'>Yes</option>
                    </select>
                </div>
            </div>
            <div class="form-group col-xs-3">
                <label class="form-label" for="event[start_date]">Start</label>
                <div>
                    <input type="text" name="event[start_date]" class="dateclicker form-control" value="" placeholder='Date' required />
                </div>
            </div>
            <div class="form-group col-xs-3 partial-day">
                <label class="form-label" for="event[start_time]">&nbsp;</label>
                <div>
                    <input type="text" name="event[start_time]" class="timeclicker form-control" value="" placeholder="Time" required/>
                </div>
            </div>
        </div>
        <div class='row' id="day-end">
            <div class="form-group col-xs-6"></div>
            <div class="form-group col-xs-3 partial-day">
                <label class="form-label" for="event[end_date]">End</label>
                <div>
                    <input type="text" name="event[end_date]" class="dateclicker form-control" value="" placeholder='Date' required />
                </div>
            </div>
            <div class="form-group col-xs-3 partial-day">
                <label class="form-label" for="event[end_time]">&nbsp;</label>
                <div>
                    <input type="text" name="event[end_time]" class="timeclicker form-control" value="" placeholder='Time' required />
                </div>
            </div>
        </div>
        <label class="form-label" for="event[color]">Pick a color</label>
        <input type="hidden" value="" id="color-field" name="event[color]" required/>
        <div class='row' id='colors'>
            <!--Colors populate here via js-->
        </div>
        <hr />
        <div class='row' id="notify-me">
            <div class="form-group col-xs-6">
                <label class="form-label" for="event[notify_bool]">Would you like to set an email notification for this event?</label>
                <div>
                    <select class='form-control' name='event[notify_bool]' id="notify-bool">
                        <option value='1' selected>Yes</option>
                        <option value='0'>No</option>
                    </select>
                </div>
            </div>
            <div class="form-group col-xs-5" id="notify-hours">
                <label class="form-label" for="event[notify_hours]">Notify me this many hours before the event</label>
                <div>
                    <input type="number" name="event[notify_hours]" class="form-control tickler-time" value="" min="0" placeholder='Hours'/>
                </div>
            </div>
        </div>
        <hr />
        <div class='row'>
            <div class="form-group col-xs-12">
                <label class="form-label" for="event[notes]">Add a note for this event</label>
                <div>
                    <textarea name="event[notes]" id="notes"></textarea>
                </div>
            </div>
        </div>
    </form>

Javascript:

$('#submit-form').click(function(){
$.post('notifications/add_event', 
    $('#event-form').serialize(), 
    function(data, status, xhr){
        data = $.parseJSON(data);
        calendar.fullCalendar('renderEvent',
            {
                title: data.title,
                start: data.start,
                end: data.end
            },
            true        
        );
        $('#eventModal').modal('hide');
    });

});

Answer 1

当然，您可以在 ajax 请求之前验证您的表单。但是您必须写下自己的验证，检查所有输入以确保它们的值满足您的要求。

如果您想在按下提交按钮后验证表单，您可以这样做:

$('your-form').on('submit', function(e) {
    e.preventDefault(): //this prevent the normal submit processed by the browser


    //your validation here

    //if everything is ok
    $.ajax({...})

});

如果您想在按下提交按钮之前验证表单，那么您可以在输入模糊/更改时执行此操作，如下所示:

$('your-form input').each(function(e) {
    $(this).on('blur', function() {
        //your validation here
    });
});

在这两种情况下，您都可以通过以下方式触发提交，将提交按钮保持在表单之外:

$('your-submit-button').on('click', function() {
    $('your-form').submit();
});

您不需要创建多个按钮，只需触发即可