0

Have problem with putting both jQuery File Upload Plugin (multi file upload) and jQuery Validation Plugin script on same page (one form).

If I turn off jQuery Validation everything works fine, I can get uploaded image files and put them in auto generated input fields and then on form submit get their values. If I include jQuery Validation Plugin, upload doesn't work and I can't get image file name values on generated inputs.

Working form is here (without jQuery Validation).

Anyone knows where the problem is ? How can i solve it ? Or do I just remove jQuery Validation from that specific form on website (it's not best solution but it will work) ?

fsasvari
  • 1,891
  • 19
  • 27

2 Answers2

1

Figured it out, <div id="mulitplefileuploader">Upload</div> must be outside validation form and everything works fine. Images are uploaded correctly on the server and input fields with file name values are generated inside validation form and passed in ajax post request.

fsasvari
  • 1,891
  • 19
  • 27
0

Always put your output div outside the form and your javascript. In this format. 

<script src="jquery.js" type="text/javascript"></script>
<script src="jqueryPlugins.js" type="text/javascript"></script>
<div id="mulitplefileuploader">Upload</div>
<form></form>
<script  type="text/javascript"> ... </script>

EDIT: I've looked at your link. You need to include your validation plugin right at the bottom, this should resolve the conflict. Also I strongly advice to use developer tools in browser. "In Chrome, open developer tools/inspect element - click on console log - you will see where is the conflict." 

<html lang="en"><head>
<meta charset="utf-8">
<link href="uploadfile.css" rel="stylesheet">
<script src="../../js/jquery-1.10.1.min.js"></script>
<script src="jquery.uploadfile.min.js"></script>
</head>
<body>


<form id="form_galerija" action="" method="post" novalidate="novalidate">

    <p><input type="text" name="name" id="name" value="" placeholder="Name..."></p>

    <p><input type="text" name="surname" id="surname" value="" placeholder="Surname..."></p>

    <div id="files">

    </div>

    <p><input type="submit" name="submit_ok" value="Dodaj slike"></p>

</form>

 <script type="text/javascript">
    $(document).ready(function(){
        var validator = $('#form_galerija').validate({
          rules:{
            name:{required:true},
            surname:{required:true}
          },
          messages:{
            name:{required:'Name je obavezan!'},
            surname:{required:'Surname je obavezan!'}
          },
          submitHandler: function(form){
            $('#submit_ok').attr('disabled','disabled');
            $('#submit_ok').attr('value','Pričekajte...');
            $(form).ajaxSubmit({
              url: 'http://www.agroklub.com/test/image3/index2.php',
              success: function(r){
                if (r.match(/true/gi)) {
                    title = $('#name').val();
                    alert('Slika "'+title+'" je uspješno dodana!' + r);
                }
                else {
                    $('#submit_ok').removeAttr('disabled');
                    $('#submit_ok').attr('value','Dodaj slike');
                    alert('Greška prilikom dodavanja slika!' + r);
                }
              }
            });
          }
        });
    });
</script>




    <div class="ajax-upload-dragdrop" style="vertical-align:top;"><div class="ajax-file-upload" style="position: relative; overflow: hidden; cursor: default;">Upload<form method="POST" action="upload.php" enctype="multipart/form-data" style="margin: 0px; padding: 0px;"><input type="file" id="ajax-upload-id-1417544307288" name="slika[]" multiple="" style="position: absolute; cursor: pointer; top: 0px; width: 64px; height: 35px; left: 0px; z-index: 100; opacity: 0;"></form></div><span><b>Drag &amp; Drop Files</b></span></div><div id="mulitplefileuploader" style="display: none;">Upload</div><div></div>

    <div id="status"></div>

<script>
    $(document).ready(function(){
        var broj = 1;
        var settings = {
            url: "upload.php",
            dragDrop:true,
            fileName: "slika",
            multiple:true,
            allowedTypes:"jpg", 
            returnType:"json",
            onSuccess:function(files,data,xhr)
            {
               //alert((data));
               $("#files").append("<input type='text' value='" + data + "' name='file_" + broj + "' />");

               broj++;
            },
            showDelete:true,
            deleteCallback: function(data,pd)
            {
                for (var i=0; i<data.length; i++)
                {
                    $.post("delete.php",{op:"delete",name:data[i]},
                    function(resp, textStatus, jqXHR)
                    {
                        //Show Message  
                        $("#status").append("<div>File Deleted</div>");      
                    });
                }      
                pd.statusbar.hide(); //You choice to hide/not.

            }
        }
        var uploadObj = $("#mulitplefileuploader").uploadFile(settings);
    });
</script>

<script src="../../js/jquery.validate.min.js"></script>

</body></html>
SergeDirect
  • 2,019
  • 15
  • 20
  • Actually it works when script is in isolated environment, but when it's included in actual website it doesn't work. I fugure it out and the problem is with jQuery Form script - http://malsup.com/jquery/form/ – fsasvari Dec 02 '14 at 11:36