Подтвердить форму перед отправкой ajax submit

Question

Редактировать: Чтобы уточнить, это внутри загрузочного модального кода, а кнопка находится в нижнем колонтитуле формы. Я не могу отправить нормальную форму, потому что мне нужно будет изменить расположение кнопки отправки, чтобы быть внутри формы, и я не хочу этого делать - она ​​должна оставаться внутри нижнего колонтитула.

Я пытаюсь проверить, чтобы заполненные поля были заполнены перед отправкой формы через ajax, но все ответы, которые я встретил, говорят, что я должен использовать плагин jquery .validate(), и я не знаю, t хотите использовать любые дополнительные плагины. Возможно ли это сделать?

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

Если вы хотите, чтобы проверка 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">&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>

Answer 2

$('#event-form').on('submit', function(e){  
// do your validation code 
// ... 
// if all is ok 
$.ajax(...) 
// else 
e.preventDefault(); 
}) 

Answer 3

Конечно, вы можете подтвердить свою форму до запроса Аякса. Но вы должны записать свои собственные проверки, проверяя все входные данные, чтобы убедиться, что их значение соответствует вашим требованиям.

Если вы хотите проверить форму после нажатия кнопки отправить выталкивается, вы можете сделать это:

$('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(); 
}); 

Вам не нужно создавать несколько кнопок, просто для запуска