IE Submits blank or incomplete form automatically after js Alert messages. Does not occur in any other browser.

[GoogleCodeExporter]

What steps will reproduce the problem?
1.Any entry that does not validate, or skipping a Required box.
2.
3.

What is the expected output? What do you see instead?

If any entry does not validate, the cursor should return to the box for correct 
entry, rather, the form simply submits on its own accord, without allowing for 
additional entries.

What version of the plugin/jQuery are you using?
PLUGIN VERSION: 1.47 2-8-12
JQUERY VERSION: Included in download

On what browser(s) or operating system?
BROWSER(S):

Please provide a link to where the problem can be observed:
URL:

Feel free to provide any additional information below.

Original issue reported on code.google.com by chris.br...@gmail.com on 10 Feb 2012 at 8:52

[GoogleCodeExporter]

FORGOT TO INCLUDE LINK TO ACTUAL FILE:  http://hillmanb2.com/family/   Also, I 
used the process of elimination to determine which script caused the problem.  
It appears as though the problem derives from jquery/MultiFle.js.  I am not 
experienced with Jquery, and in need of assistance. Thank You.  

Original comment by chris.br...@gmail.com on 10 Feb 2012 at 8:58

[GoogleCodeExporter]

Hey Chris,
I've had a quick look at this and wasn't able to re-create the problem. I'm 
using IE9 at the moment but I'll test other versions later. Which version of IE 
did this happen on? (it's working for me in IE9)

Original comment by diego.a...@gmail.com on 10 Feb 2012 at 1:28

• Changed state: Unidentified

[GoogleCodeExporter]

Diego.  Thanks for responding.  I am using IE7 + IE8 since I test websites in 
both.  I also tested the same in IE9 after receiving your response.  The 
problem occurs there as well.   At your convenience, access the form at  
http://hillmanb2.com/family/  - Do not complete any entries, simply scroll down 
and click submit.  The alert button will populate with the requirements, after 
clicking OK, the form submits on its own.  This occurs also when uploading a 
non-validating document.  As a test, when I remove the jquery.MultiFile.js 
file, the problem no longer occurs.  Thanks again.

Original comment by chris.br...@gmail.com on 10 Feb 2012 at 2:26

[GoogleCodeExporter]

Hey, I am now on another machine and I've tested the page on all versions of IE 
and I cannot reproduce the problem.

Steps I took:
1. Open the URL http://hillmanb2.com/family/
2. Click "Browse" under the heading "*Image File #1 - Required:"
3. Select an mp3 file (which will get rejected)

Result:
An alert box is displayed (as expected)
I click "OK", the alert box goes away, the file input is cleared (technically 
it is removed and a clone is created, but it has the desired effect)

Crucially, the form DOES NOT submit.

What are the EXACT steps you are taking to reproduce the issue?

Original comment by diego.a...@gmail.com on 11 Feb 2012 at 11:15

[GoogleCodeExporter]

Yes.  Absolutely correct.  That function is working fine now which is
great.  The only challenge that remains though is in IE only, if you
attempt to simply submit a blank form, with zero entries, the alert box
pops up, after clicking OK, the form then self submits.  So the steps are:

   1. Open the URL http://hillmanb2.com/family/
   2. Scroll down to bottom of form
   3. Click Submit
   4. Alert box pops up, as it should, click OK
   5. Form then submits itself in IE

I do not  know JQUERY but the issue now appears to be isolated to
submitting a blank form now.

Original comment by chris.br...@gmail.com on 11 Feb 2012 at 12:59

[GoogleCodeExporter]

Right, I thought there was a problem with this script causing an invalid file 
to be submitted. Glad we got that sorted.

I've been able to reproduce the problem you described (thanks for the steps) 
and I can tell you that the problem is with your validation script:
http://hillmanb2.com/java_css/gen_validatorv31.js
...and not with this plugin.

The validation script is not stopping the form submission when it should. For 
example, try selecting a file but inputting 2 different email addresses. You 
will see an error message and the form still submits.

I looked through the validation code and it seems to be working properly.

The I looked through your code and I spotted a potential pitfall here:
<input type="submit" value="Submit" 
onClick="load_image(this.form.uploadfile.value, ['gif', 'jpg', 'png', 
'jpeg']);" name="request_button">

Having an <input type="submit"> with an onlcick will always submit the form 
unless you prevent it by returning false on the onclick event.

Try changing it to:
<input type="submit" value="Submit" onClick="return 
load_image(this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);" 
name="request_button">

OR make it a button and let the javascript submit the form when it wants to:
<input type="button" value="Submit" onClick="return 
load_image(this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);" 
name="request_button">

Original comment by diego.a...@gmail.com on 11 Feb 2012 at 4:00

• Changed state: Invalid

[GoogleCodeExporter]

Diego. Thanks again for your patience, and since I know that you are busy,
I will respectfully make this the final exchange that I initiate.  The
incident that you cited only occurred in IE after including the Jquery
plugin, as well as the submission of a blank form as indicated above.

Just to be sure, I did the following:

   1. Removed all of the jquery plugin files
   2. Retained the gen_validator script and file upload function
   3. Returned the Submit button to a traditional HTML submit <input
   type="submit" value="Submit" name="request_button">
   4. Published that page as
   http://hillmanb2.com/family/index-no-jquery.htm
   5. I then attempted to submit a blank form, as well as conflicting email
   addresses, and the validator worked *exactly as it should.*
   6. None of the faulty results associated with this thread occurred, but
   of course the upload files can not be validated due to the jquery plugin
   being removed.

This is certainly not a complaint because you have generously provided your
service without charge, and the plugin works perfectly in Mozilla, Chrome,
and Opera...but perhaps not IE.  The script is impressive and I thought
that you should know about my experience. I will gladly embrace any
suggestions that you have. Thanks again.

Original comment by chris.br...@gmail.com on 11 Feb 2012 at 5:12

[GoogleCodeExporter]

Hey Chris,

Don't worry so much! I see this stuff day-in day-out and I'm happy to help if I 
can, even if it's isn't a problem with our plugin :-)

Sadly however, I've gotta run out now but I'll take another look tomorrow. But 
it *is* possible (in fact, I think it is likely) that a jQuery plugin (or even 
jQuery itself) is clashing with the validation script you have.

While I'm gone...
a) you can drop this file as it's only used on the demo page on our website:
<link href='http://hillmanb2.com/family/upload/documentation.css' 
type="text/css" rel="stylesheet"/>

b) The Form Plugin
I see that you have the jQuery form plugin on the page... why is it there? I 
don't see that you're actually using it

c) Where is the definition of the load_image function? I can't seem to find it 
(admittedly, I didn't look very hard, sorry, but I've got to run!)

...I'll take another proper look tomorrow!

Original comment by diego.a...@gmail.com on 11 Feb 2012 at 5:42

[GoogleCodeExporter]

Hello Diego.  I have relented.  I removed the previous validator script,
and tried two more.  The results in IE were the same.  For some reason, the
jquery-multifile appears to conflict with external validators, when using
IE.  I have decided to use the capabilities within my existing  PHP script
from Tectite that validates file type and file size at the server level.
My initial desire was to make the upload more user friendly by conducting
client side validation, while using the Jquery plugin, but that has been an
extensive and time consuming experience, so I am back to the initial
option.  Actually, I am now quite satisfied after explorer "greener grass"
- *LOL*!

Thanks again for your support and professionalism.  Have a great week.

Original comment by chris.br...@gmail.com on 12 Feb 2012 at 7:18

[GoogleCodeExporter]

Hi Chris,

Did you try removing the form plugin? If you don't mind I've taken the liberty 
to make a copy of your page here so I can debug it:
http://www.fyneworks.com/jquery/multiple-file-upload/test/family/

...if something is wrong (as it seems to be) then I've got to fix it. I'm not 
clear if you tried it without the form plugin, so I'm going to have a go.

Original comment by diego.a...@gmail.com on 13 Feb 2012 at 7:06

• Changed state: Started

[GoogleCodeExporter]

RIGHT....

I simply cannot figure out why the form is submitting. I am absolutely certain 
now it's because of a conflict between this plugin and your validation script. 
So, for the sake of making this work (and my own sanity), I made you a simple a 
work-around.

I've got it to work by adding this code to the end of the page...

$(function(){
    $('input:submit').click(function(){
        if($('.image_name1').val()=='' || $('.image_name1').val()==undefined){
            alert('Upload at least one image file - Required');
            return false;
        }
        return true;
    });
});

Original comment by diego.a...@gmail.com on 13 Feb 2012 at 7:40

• Changed state: Unidentified

[GoogleCodeExporter]

Sadly after my previous post I realised that essentially, IE will submit the 
form even if there are other errors. So I pushed on and coded a solution that 
will 100% guaranteed work!

Ditch your custom validation script and use this instead (it has the exact same 
effect):

$(function(){
    $('input:submit').click(function(){
        var e=[];
        if(!$('input[name=first_file]').val()) e[e.length]='Upload at least one image file - Required.';
        if(!$('input[name=contact_name]').val()) e[e.length]='Please enter your Name - Required.';
        if(!$('input[name=phone1]').val()) e[e.length]='Phone Number - Required.';
        if(!$('input[name=image_name1]').val()) e[e.length]='Name the First Image - Required.';
        if(!$('input[name=image_caption1]').val()) e[e.length]='Include caption or description of First Image.';
        if(!$('input[name=email]').val() || !validateEmail($('input[name=email]').val())) e[e.length]='A valid email address is required.';
        if($('input[name=email]').val()!=$('input[name=email2]').val()) e[e.length]='Emails did not match.';
        if(e.length>0){
            alert(e.join('\n'));
            return false;
        }
        return true;
    });
});

function validateEmail(email){
    var splitted = email.match("^(.+)@(.+)$");
    if(splitted == null) return false;
    if(splitted[1] != null )
    {
        var regexp_user=/^\"?[\w-_\.]*\"?$/;
        if(splitted[1].match(regexp_user) == null) return false;
    }
    if(splitted[2] != null)
    {
        var regexp_domain=/^[\w-\.]*\.[A-Za-z]{2,4}$/;
        if(splitted[2].match(regexp_domain) == null) 
        {
            var regexp_ip =/^\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]$/;
            if(splitted[2].match(regexp_ip) == null) return false;
        }// if
        return true;
    }
 return false;
};

Original comment by diego.a...@gmail.com on 13 Feb 2012 at 7:59

[GoogleCodeExporter]

Diego.  You are a champ.  I will include the functions and test today after
making sales calls.  Will respond with results this evening.  Thanks
tremendously.

Original comment by chris.br...@gmail.com on 13 Feb 2012 at 3:12

[GoogleCodeExporter]

Diego:  Just as you stated, the form, which now includes the Jquery Plugin
+ the validation that you developed is now functioning in *each* browser
that I tested!

The only issue, which is minor, is that the <textarea> box does not
validate.  There is only one of those required, which is the first Image
Caption.  That is not a huge deal and if necessary, does not have to be a
required entry.

I have updated the page to include the plugins.  (
http://hillmanb2.com/family/) Again, you are a true professional.  [?]

On Mon, Feb 13, 2012 at 10:12 AM, Christopher Bryant <
chris.bryant777@gmail.com> wrote:

Original comment by chris.br...@gmail.com on 14 Feb 2012 at 2:18

[GoogleCodeExporter]

Just replace all....
$('input[name=

For...
$(':input[name=

Because $('input') matches <input /> tags
And $(':input') matches <input />, <textarea />, <select />, etc....

jQuery is lovely.

Original comment by diego.a...@gmail.com on 14 Feb 2012 at 2:35

• Changed state: Done

[GoogleCodeExporter]

MISSION ACCOMPLISHED!  Thanks Diego.

Two questions.  #1 What would you suggest that I do to start learning
JQUERY.   #2.  Would love to make a donation to you next week, do you have
a PayPal account?

Original comment by chris.br...@gmail.com on 14 Feb 2012 at 3:38

[GoogleCodeExporter]

#0
YAY! Sorry it took so long. 

#1
http://www.learningjquery.com/ is by far the best website out there (my 
favourite). Some of the articles are a little technical but don't be put off. 
There's content for all audiences and it's a really good starting point for 
anyone.

#2
You really don't have to, it was no trouble. But if you do want to buy me a 
drink then just follow the "Donate" link on the top-right hand corner of our 
site:
http://www.fyneworks.com/jquery/

$('jquery.learning').addClass('good luck')';
//  Good luck with all the jQuery learning

Original comment by diego.a...@gmail.com on 14 Feb 2012 at 3:46