0

我在模式中有一个表单，我试图在表单提交到 ajax db 等之前对其进行验证。

我正在尝试验证表单 $("#new_request_form").validate({ 在保存按钮上。如果它验证然后提交表单。

谁能告诉我我错过了什么？

提前致谢！

$(document).ready(dialogForms);
function dialogForms() {    
 $('a.menubutton').click(function() {
    var a = $(this);
    $.get(a.attr('href'),function(resp){
      var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
      $('body').append(dialog);
      dialog.find(':submit').hide();
      dialog.dialog({
        title: a.attr('title') ? a.attr('title') : '',
        modal: true,
        buttons: {
          'Save': function() {
                $("#new_request_form").validate({
                 submitHandler: function(form) {
                     submitFormWithAjax($(this).find('form'));
                    $(this).dialog('close');
                 }
                });

                },
          'Cancel': function() {$(this).dialog('close');}
        },
        close: function() {$(this).remove();},
        width: 600,
        height: 500,        
        show: "fade",
        hide: "fade"
      });

var $ac_start_date = '<?php echo $ac_end_date ?>',
    $ac_start_date_flip = '<?php echo $ac_end_date_flip ?>',
    $ac_start_parsed = Date.parse($ac_start_date),
    _today = new Date().getTime();

// For Opera and older winXP IE n such
if (isNaN($ac_start_parsed)) { 
    $ac_start_parsed  = Date.parse($ac_start_date_flip);
}

var _aDayinMS = 1000 * 60 * 60 * 24; 

// Calculate the difference in milliseconds
var difference_ms = Math.abs($ac_start_parsed - _today);

// Convert back to days and return
var DAY_DIFFERENCE = Math.round(difference_ms/_aDayinMS);       

// do initialization here
$("#startdate").datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '0:+100',
            minDate: '+1d',         
            maxDate: '+' + (DAY_DIFFERENCE + 1) + 'd'
});

// do initialization here
$("#enddate").datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '0:+100',
            minDate: '+1d',         
            maxDate: '+' + (DAY_DIFFERENCE + 1) + 'd'
});

}, 'html');
return false;
});
}

function submitFormWithAjax(form) {
  form = $(form);
  $.ajax({
    url: form.attr('action'),
    data: form.serialize(),
    type: (form.attr('method')),
    dataType: 'script',
    success: function(data){
    $(this).dialog('close');
    // Refresh table
   }
  });
  return false;
}

形式

<?php
require_once("../config.php");
include_once("scripts/connection.php");
?>

<p class="validateTips">All form fields are required.</p>
<div>
<form id="new_request_form" action="insert_new_request.php" method="POST" class="new_request">
<fieldset>
   <legend><p class="subheadertext">Request Holiday</p></legend>

<table width="100%" border="0">

<?php
$username = $USER->firstname.' '.$USER->lastname;

$is_academic_result = mysql_query('SELECT * FROM holiday_entitlement_academic WHERE employee = \'' . $username . '\'');

if($is_academic = mysql_fetch_array($is_academic_result)) {
    switch($is_academic['units']) {
        case 'days':
                  echo'<tr>
                    <td width="150px" valign="middle"><label for="days">Days:</label></td>
                    <td valign="top">
                    <select id="days" name="days">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    </select>
                    </td>
                  </tr>
                    <tr>
                      <td width="150px" valign="middle"><label for="startdate">Start Date:</label></td>
                      <td valign="top"><input type="text" name="startdate" id="startdate" class="required" readonly="readonly"/></td>
                    </tr>';
            break;
        case 'hours':
                  echo'<tr>
                    <td width="150px" valign="middle"><label for="days">Hours:</label></td>
                    <td valign="top"><input type="text" name="hours" id="hours" class="required" /></td>
                  </tr>
                    <tr>
                      <td width="150px" valign="middle"><label for="startdate">Start Date:</label></td>
                      <td valign="top"><input type="text" name="startdate" id="startdate" class="required" readonly="readonly"/></td>
                    </tr>
                    <tr>
                      <td width="150px" valign="middle"><label for="startdate">End Date:</label></td>
                      <td valign="top"><input type="text" name="enddate" id="enddate" class="required" readonly="readonly"/></td>
                    </tr>';
            break;
        default:
            break;
}
} 

?>
  </table>

  <input type="hidden" id="acyear" name="acyear" value="<?php echo $academic_start_date; ?>"/>
  <input type="hidden" id="user" name="user" value="<?php echo $USER->id; ?>"/>
  <input type="hidden" id="employee" name="employee" value="<?php echo $USER->firstname.' '.$USER->lastname; ?>"/>
 </fieldset>
</form>
</div>

编辑 - 它的作用

当您单击保存时，以下内容不会执行任何操作，模式会保持不变，即使您填写表单也不会执行任何操作：

  'Save': function() {
            $("#new_request_form").validate({
             submitHandler: function(form) {
                 submitFormWithAjax($(this).find('form'));
                $(this).dialog('close');
             }
            });

        },

使用以下表单提交并按预期工作，只是没有验证：

 'Save': function() {
                 submitFormWithAjax($(this).find('form'));
                $(this).dialog('close');

            },
4

1 回答 1

1

我猜在调用 submitHandler 函数时，您传递了错误的选择器。$(this) 代表表单本身，因此无需在其中查找表单。

所以替换此代码

submitFormWithAjax($(this).find('form'));

和

submitFormWithAjax($(this));

或交替

submitFormWithAjax($("#new_request_form"));

这将解决您的问题。

于 2012-09-04T15:53:44.337 回答