在哪里使用 JQuery-UI AJAX PHP 添加验证？

Question

我已经尝试了所有我能想到的在创建表单 DOM 对象后添加验证的变体。代码本身可以打开和关闭 jquery-ui.dialog。我只是不知道在处理程序中的何处拼接以进行任何验证。

 //party_device_edit Begin 
    var party_device_edit = $('#party_device_edit').dialog({
      autoOpen: false,  width:'auto',  modal: true, title: 'Edit Device', 
      buttons: {
        'Save': function(){
**//Tried Adding Validation Here**
            $.ajax({
            url: '/party_device/save.php',
            type: 'POST',
            data: $('#party_device_edit_form').serialize(),
            success: function(data){
              //Re-queries the data and refreshes the piece of the page that has updated data.
              $.get('helper.php?function=party_device&id=<?php echo $_GET['id'];?>',function(data){$('#party_device').html(data);});
              $('#party_device_edit').dialog('close');
            }
          });
        return false;
        }
      }
    });
    $(document).on('click', '.party_device_edit', function (e) {
        e.preventDefault();
        $.ajax({
        url: $(this).attr('href'),
        type: 'POST',
        success: function(data){
          party_device_edit.html(data);
**//Tried Adding Validation Here**
          party_device_edit.dialog('open');
**//Tried Adding Validation Here**
        }
      });
    });
    //party_device_edit End

Answer 1

You put the ajax inside the submitHandler in the Validate plugin，然后将.submit() 分配给您的模态框的“保存”按钮。

$(document).ready(function () {

    $("#party_device_edit_form").validate({
        // // validate rules & options,
        submitHandler: function (form) {
            $.ajax({
                url: '/party_device/save.php',
                type: 'POST',
                data: $(form).serialize(),
                success: function (data) {
                    //Re-queries the data and refreshes the piece of the page that has updated data.
                    $.get('helper.php?function=party_device&id=<?php echo $_GET['
                    id '];?>', function (data) {
                        $('#party_device').html(data);
                    });
                    $('#party_device_edit').dialog('close');
                }
            });
            return false;
        }
    });

    var party_device_edit = $('#party_device_edit').dialog({
        autoOpen: false,
        width: 'auto',
        modal: true,
        title: 'Edit Device',
        buttons: {
            'Save': function () {
                $("#party_device_edit_form").submit();
            }
        }
    });

});

由于您未能显示您的 HTML，我无法创建特定的演示，但这里有一个与您的 非常 相似的测试用例...

演示：http://jsfiddle.net/7bA8M/