在发送Ajax提交之前验证表单 [英] Validate form before sending ajax submit
本文介绍了在发送Ajax提交之前验证表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，为了澄清起见，这是在引导程序模版内部，并且按钮位于表单的页脚OUTSIDE内.我无法进行常规表单提交，因为我必须将提交按钮的位置更改为在表单内部，并且我不想这样做，它需要留在页脚中.
So to clarify, this is inside of a bootstrap modal and the button's in the footer OUTSIDE of the form. I can't do a normal form submit because I'd have to change the location of the submit button to be inside of the form and I don't want to do that- it needs to stay inside the footer.
在尝试通过ajax提交表单之前，我试图检查以确保必填字段已填写，但是我遇到的所有答案都说我应该使用jquery .validate()插件，但我不这样做想要使用任何其他插件.这可能吗?
I'm trying to check to make sure required fields are filled out before submitting a form via ajax but all the answers I've come across say that I ought to use the jquery .validate() plugin and I don't want to use any additional plugins. Is this possible to do?
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:
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');
});
});
推荐答案
如果您希望html5验证与表单外的按钮一起按预期工作.您需要将隐藏按钮放置在表单内部，并使可视按钮单击其他按钮以强制进行html5验证.
If you are wanting the html5 validation to work as intended with the button outside of the form. You'd need to place hidden button inside of the form and have the visual button click the other button to force the html5 validation.
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>这篇关于在发送Ajax提交之前验证表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
