Почему Javascript проходит не проверенную информацию

Question

У меня есть следующие два DateTimePicker функции/поля:

$(function() 
    { 
     $('#updateJobForm').validate(); 
     var startDateTime = $('#startTime'); 
     var endDateTime = $('#endTime'); 
     var currentDate = new Date(); 
     var orginalDate = startDateTime.val(); 

     startDateTime.datetimepicker(
      { 
       timeFormat: "hh:mm tt", 
       minDate: ("setDate", '',new Date()), 
       hourGrid: 12, 
       minuteGrid: 15, 
       stepMinute: 15, 
       onClose: function(dateText, inst) 
       { 
        if (endDateTime.val() != '') 
        { 
         var testStartTime = startDateTime.datetimepicker('getDate'); 
         var testEndTime = endDateTime.datetimepicker('getDate'); 
         if (testStartTime > testEndTime) 
         { 
          alert("The start time cannot be greater than the end time."); 
          //startDateTime.val(currentDate.format("m/d/yyyy hh:mm tt")); 
         } 
        } 
        else 
        { 
         endDateTime.val(dateText); 
        } 
       }, 
       onSelect: function (selectedDateTime) 
        { 
         var testStartTime = startDateTime.datetimepicker('getDate'); 
         var testEndTime = endDateTime.datetimepicker('getDate'); 
         //if(endDateTime.val() == '') 
         //{ 
          endDateTime.datetimepicker('option', 'minDate', startDateTime.datetimepicker('getDate')); 
        } 
       } 
      ); 
      endDateTime.datetimepicker(
       { 
        minDate: ("setDate", '',new Date()), 
        timeFormat: "hh:mm tt", 
        hourGrid: 12, 
        minuteGrid: 15, 
        stepMinute: 15, 
        onClose: function(dateText, inst) 
        { 
         if (startDateTime.val() != '') 
         { 
          //var testStartTime = startDateTime.datetimepicker('getDate'); 
          var testEndTime = endDateTime.datetimepicker('getDate'); 
          //if (testEndTime < testStartTime) 
          //{ 
          //alert("The end date blah blah"); // and time must be greater than the start date and time"); 
          //endDateTime.val(testStartTime.format("mm/dd/yyyy hh:MM")); 
          //} 
          //else 
          endDateTime.datetimepicker('setDate', testEndTime); 
         } 
         //else 
         { 
         // startDateTime.val(dateText); 
         } 
        }, 
        onSelect: function (selectedDateTime) 
        { 
        startDateTime.datetimepicker('option', 'maxDate', endDateTime.datetimepicker('getDate')); 
        } 
       } 
      ); 
     } 
    ); 
    function validate_form() 
    { 
     var sDate= new Date(document.updateJobForm.startTime.value); 
     var eDate= new Date(document.updateJobForm.endTime.value); 
     if ((document. updateJobForm.startTime.value != "") && (document. updateJobForm.endTime.value != "") && (sDate < eDate)) 

     { 
      return true; 
     } 

     else 

     { 
      alert("Please choose a start date/time that begins before the end date/time"); 
      return false; 
     } 
    } 

И а функция validate_form, которая вызывается из Моей кнопки, которая выглядит, как это представить:

<td align="right"><input name="reset" type="reset" value="Reset" /> 
<input name="submit" type="submit" value="Update" onclick="validate_form()"/></td> 
<td>&nbsp;</td> 

Когда я нажимаю кнопку отправки (с неправильными данными, то есть дата начала больше, чем дата окончания), я получаю предупреждающее сообщение, в котором пользователь должен указать время. После того, как пользователь нажимает кнопку «ОК» на предупреждение, форма затем отправляет неверные данные. Функция выглядит правильно, и логика, похоже, работает, но почему форма представляется после того, как функция возвращает false? Чтобы ухудшить ситуацию, если данные верны, форма не будет отправлена ​​вообще. Что происходит не так и как я могу это исправить?

Answer 1

Вы пропустили возвращение в кнопке

onclick="return validate_form()" 

Answer 2

Ваша функция проверки должна быть помещена на «onSubmit» событие самой формы, а не на «OnClick» события на кнопку отправки! Именно здесь возвращаемое значение предотвращает отправку формы!