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

时间：2015-11-12 21:10:27

标签： javascript jquery ajax forms validation

编辑：所以要澄清一下，这是一个bootstrap模式和按钮在表单的页脚OUTSIDE中。我无法进行正常的表单提交，因为我必须将提交按钮的位置更改为表单内部，我不想这样做 - 它需要保留在页脚内。

我正在尝试检查以确保在通过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');
    });

}）;

3 个答案:

答案 0 :(得分：1)

如果您希望html5验证按照预期的方式使用表单外部的按钮。您需要在表单内放置隐藏按钮，并使用可视按钮单击另一个按钮以强制进行html5验证。

＆＃13;
＆＃13; 
var form = $('#event-form');
form.on('submit', function() {
  // do ajax request
});

$('#submit-form').on('click', function() {
    $('#real-submit').click();
})
＆＃13; 
body .modal {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  display: block;
}
body .modal-dialog {
  left: auto;
  margin: 20px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="eventModalLabel">New Event</h4>
      </div>
      <div class="modal-body">
        <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>
          <input type="submit" id="real-submit" style="visibility: hidden" />
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="submit-form" class="btn btn-primary">Save Event</button>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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();
});

您无需创建多个按钮，只需触发

即可

答案 2 :(得分：0)

int(ma)
相关问题
最新问题