在发送ajax提交之前验证表单
Validate form before sending ajax submit
编辑：所以要澄清的是，这是在引导模式内部，按钮在表单外部的页脚中。我不能进行正常的表单提交，因为我必须将提交按钮的位置更改为在表单内部，我不想这样做-它需要留在页脚中。
在通过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]"> </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]"> </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');
});
})；
当然，您可以在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();
});
您不需要创建多个按钮，只需触发
如果您希望用表单外的按钮进行html5验证。您需要在表单内放置隐藏按钮，并让可视化按钮单击另一个按钮来强制进行html5校验。
var form = $('#event-form');
form.on('submit', function() {
// do ajax request
});
$('#submit-form').on('click', function() {
$('#real-submit').click();
})body .modal {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 1;
display: block;
}
body .modal-dialog {
left: auto;
margin: 20px;
}<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">×</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]"> </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]"> </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>$('#event-form').on('submit', function(e){
// do your validation code
// ...
// if all is ok
$.ajax(...)
// else
e.preventDefault();
})
相关文章：
- JAVASCRIPT验证表单中的日期
- 如何在使用ajax提交的codeigniter中使用form_validation验证表单数据
- 如何使用jQuery正确验证表单
- Javascript不会验证表单
- 如何使用javascript验证表单中的数据，然后调用php页面
- 包括来自另一个页面的Boostrap模态;t验证表单
- Javascript验证表单不重定向页面
- 在提交之前验证表单，jQuery发布到javaScript，然后提交到确认页面
- 引导复选框-x 选中时未正确更新 DOM - 如何验证表单
- Jquery 验证表单
- 验证表单中的 jQuery-UI 微调器
- 在 Jquery 中验证表单的输入字段
- 如何验证表单控制数据大小不超过2.5 mb
- 在表单进入Angular中的ng-submit之前验证表单
- Javascript表单验证:表单在错误返回时提交:
- 使用Angular.js验证表单输入的原始状态
- 正在复制验证表单
- 如何在转盘中逐步(3步）验证表单
- 使用javascript验证表单值
- 验证表单按id输入val
