0

私はまだ AJAX に不慣れで、cgi-bin と IFrame を使用してサーバー側にファイルをアップロードする前に、フォームの検証に少し苦労しています。

したがって、私のコードは次のとおりです。

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