Question

我有一个包含多个输入字段的表单。每次验证都可以正常工作，我使用dropzone上传图像。但是，如果表单有效，我只需要上传图片。否则，我将不会上传图片。

图片正在上传，现在仅表单有效，但我需要将表单数据与之一起发布

$('document').ready(function() {
  $("#notification-property").hide();

  /* handling form validation */
  $("#property-form").validate({
    rules: {
      prop_title: "required",
      prop_price: {
        required: true,
        digits: true
        },
      prop_area: {
        required: true,
        digits: true
      },
      prop_address: "required",
      prop_message: {
        required: true,
        minlength: 10,
        maxlength: 2000
      },
      prop_owner_name: "required",
      prop_owner_email: {
        required: true,
        email: true
      },
      prop_owner_phone: {
        required: true,
        digits: true
      },
    },
    messages: {
      'prop_title': {
        required: "Please enter title for your property"
      },
      prop_price: {
        required: "Please enter price of your property",
        digits: "Please enter price in digits (AED)"
      },
      prop_area: "Please enter Sqft of your property",
      prop_address: "Please enter address of your property",
      prop_message: {
        required: "Please enter detailed Information",
        minlength: "Please enter something about your property in 50 - 20000 characters",
        maxlength: "Please enter something about your property in 50 - 20000 characters"
      },

            prop_owner_name: "Please enter your name",
            prop_owner_email: {
                required: "Please enter your email address",
                email: "Please enter valid email address"

            },
            prop_owner_phone: {
                required: "Please enter your phone number",
                digits: "Please enter valid phone number"

            },
    },
    //submitHandler: submitPropertyForm
  });




        Dropzone.autoDiscover = false;
        $(function () {
                $("div#myDropzone").dropzone({

                        url: 'submit_property_data.php',
                        addRemoveLinks: true,
                        paramName: "file",
                        maxFiles:11,
                        uploadMultiple: true,
                        autoProcessQueue: false,
                        parallelUploads: 10,

                        init: function () {

                                var myDropzone = this;

                                // Update selector to match your button
                                $("#submit-button").click(function (e) {
                                    e.preventDefault();

                                    if ( $("#property-form").valid() ) {
                                        myDropzone.processQueue();



                                this.on('sending', function(file, xhr, formData) {
                                        // Append all form inputs to the formData Dropzone will POST
                                        var data = $('#property-form').serializeArray();
                                        $.each(data, function(key, el) {
                                                formData.append(el.name, el.value);
                                        });
                                });

                                    this.on("success", function(file, responseText) {
                                            alert(responseText);
                                    });

                            }
                            else {
                                console.log("form invalids");
                            }


                        });
                    }
                });

    });

});

上传图片后出现错误。

property-submit.js:91 Uncaught TypeError: this.on is not a function
    at HTMLButtonElement.<anonymous> (property-submit.js:91)
    at HTMLButtonElement.handle (jquery.min.js:17)
    at HTMLButtonElement.k (jquery.min.js:16)
(anonymous) @ property-submit.js:91
handle @ jquery.min.js:17
k @ jquery.min.js:16

Answer 1

您应将＃submit-button的验证控件移至dropzone初始化。我猜这是导致错误的原因，因为它不检查表单的有效性。

init: function () {
    var myDropzone = this;
    // Update selector to match your button
    $("#submit-button").click(function (e) {
               e.preventDefault();
               if ( $("#property-form").valid() ) {
                       myDropzone.processQueue();
               } else {
               console.log('form invalid');
               }
    });
...

HTMLButtonElement。<anonymous>发送数据错误

1 个答案: