0

在使用 cgi-bin 和 IFrame 将文件上传到服务器端之前，我仍然是 AJAX 的新手，并且在表单验证方面有些挣扎。

所以，我的代码如下：

HTML：

<body>
    <h1 align="center">Network Failure Detection</h1>
    <form id="input" action= "../cgi-bin/test.py" method="post">
        <div id = "table">
                <table class = "center" border="1" cellpadding="10">
                    <tr><td style="height: 131px">Product Details</td>
                        <td style="height: 131px">Product Name*:&nbsp;<input type="text"  name="product" id="product" size="35" ><br /><br />
                                                  Platform*: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <input type="text"  name="platform" id="platform" size="35" >
                    </td></tr> 
                    <tr><td style="height: 131px">File Upload</td>
                    <td style="height: 131px"><p>Upload Host File: <input type="file" name="hostupload" id = "hostupload"/></p><br/>
                                                 Upload Test File: <input type="file" name="testupload" id = "testupload"/></p>
                    </td></tr> 
                    <tr align="center"><td></td><td><input type = "submit" id="submit" value = "UPLOAD"/>
                   </td></tr>

                </table>
            </div>
   </form>

<div id="output"></div>

JS：

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
   <script>
       $.fn.ajaxForm = function(options) {
    options = $.extend({}, {
        onSubmit:function() {},
        onResponse:function(data) {}
    }, options);
    var iframeName = 'ajaxForm', $iframe = $('[name=' + iframeName + ']');
    if (!$iframe.length) {
        $iframe = $('<iframe name=' + iframeName + ' style="display:none">').appendTo('body');
    }
    return $(this).each(function() {
        var $form = $(this);
        $form
            .prop('target', iframeName)
            .prop('enctype', 'multipart/form-data')
            .prop('encoding', 'multipart/form-data')
            .submit(function(e) {
                options.onSubmit.apply($form[0]);
                $iframe.one('load', function() {
                    var iframeText = $iframe.contents().find('body').text();
                    options.onResponse.apply($form[0], [iframeText]);
                });
            });
    });
};
$('#input').ajaxForm({
    onResponse:function(data) {

        alert(data);
        //console.log("the data is"+data);
        //$('#output').html(data);
    }
});

此代码工作正常，我可以上传文件和我的文本框字段。但是我想在提交之前对表单进行空字段验证，所以我尝试使用 JQuery 验证插件，但是如果我这样做，我的表单不会通过 AJAX 提交。谁能告诉我如何在这里执行表单验证？

以下 javascript 代码不通过 AJAX 提交表单：

<script>
$.fn.ajaxForm = function(options) {
      $('#upload').validate({
                               rules: {
                                        product: {
                                            required: true,
                                        },
                                        platform: {
                                            required: true,
                                        },
                                    hostupload:{
                                      required: true,
                                    },
                                    testupload:{
                                      required: true,
                                    },
                                    },

                                        messages: {
                                    product: {
                                          required: '***Product Name Required***'
                                      },
                                    platform: {
                                          required: '***Platform Required***'
                                      },
                                      hostupload:{
                                      required: '***Hostfile Required***'
                                    },
                                    testupload:{
                                      required: '***Testfile Required***'
                                    },
                                  },

    options = $.extend({}, {
        onSubmit:function() {},
        onResponse:function(data) {}
    }, options);
    var iframeName = 'ajaxForm', $iframe = $('[name=' + iframeName + ']');
    if (!$iframe.length) {
        $iframe = $('<iframe name=' + iframeName + ' style="display:none">').appendTo('body');
    }
    return $(this).each(function() {
        var $form = $(this);
        $form
            .prop('target', iframeName)
            .prop('enctype', 'multipart/form-data')
            .prop('encoding', 'multipart/form-data')
            .submit(function(e) {
                options.onSubmit.apply($form[0]);
                $iframe.one('load', function() {
                    var iframeText = $iframe.contents().find('body').text();
                    options.onResponse.apply($form[0], [iframeText]);
                });
            });
    });

     }); 
};
$('#input').ajaxForm({
    onResponse:function(data) {

        alert(data);
        //console.log("the data is"+data);
        //$('#output').html(data);
    }
});

4

0 回答 0