jQuery File Upload Plugin don't work when jQuery Validator included on page

Question

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 · Accepted Answer · 2014-12-01 11:03:24Z

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.

answered Dec 1, 2014 at 11:03

fsasvari

1,95120 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AbdulBasit Over a year ago

Thanks, Yes when it is out of form body it works fine :)

SergeDirect · Accepted Answer · 2014-12-02 18:25:12Z

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>

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 - malsup.com/jquery/form

Collectives™ on Stack Overflow

jQuery File Upload Plugin don't work when jQuery Validator included on page

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related