Multiple Forms with same field names result in wrong validation #138

Closed
co-operation opened this Issue Jul 29, 2011 · 48 comments

Comments

Projects
None yet
6 participants
@co-operation
Contributor

co-operation commented Jul 29, 2011

If there are multiple forms on one page, and two different forms share a field with the same field name but different id (valid html, form names may be identical as long as they are not inside one form), validation messages appear at the first form within the DOM.

Validation should b based on id's, not field names.

@co-operation

This comment has been minimized.

Show comment Hide comment
@co-operation

co-operation Jul 29, 2011

Contributor

The issue is not 100% reproduceable, I will try to figure out the conditions for that error to occur

Contributor

co-operation commented Jul 29, 2011

The issue is not 100% reproduceable, I will try to figure out the conditions for that error to occur

@posabsolute

This comment has been minimized.

Show comment Hide comment
@posabsolute

posabsolute Jul 29, 2011

Owner

I think i know how it happened, radio buttons and checkbox are sometimes based on name, because they are grouped, there is probably a $(form).find... missing somewhere

Owner

posabsolute commented Jul 29, 2011

I think i know how it happened, radio buttons and checkbox are sometimes based on name, because they are grouped, there is probably a $(form).find... missing somewhere

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Jul 29, 2011

Hi,
I have exactly the same problem.
How can I resolve it?

Thanks in advance
Bye
Andrea

Zanfe commented Jul 29, 2011

Hi,
I have exactly the same problem.
How can I resolve it?

Thanks in advance
Bye
Andrea

@posabsolute

This comment has been minimized.

Show comment Hide comment
@posabsolute

posabsolute Jul 29, 2011

Owner

Do you use the latest version? (not the package)

Owner

posabsolute commented Jul 29, 2011

Do you use the latest version? (not the package)

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Jul 29, 2011

I downloaded the zip file from link "Downloads"
Is it not right?
Where is the link for the latest version?

Thanks
Bye

Zanfe commented Jul 29, 2011

I downloaded the zip file from link "Downloads"
Is it not right?
Where is the link for the latest version?

Thanks
Bye

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Jul 29, 2011

Collaborator

the lastest latest should come as a result of

git clone git@github.com:posabsolute/jQuery-Validation-Engine.git
or by hitting the download button in the git project page

Sincerely,

Collaborator

orefalo commented Jul 29, 2011

the lastest latest should come as a result of

git clone git@github.com:posabsolute/jQuery-Validation-Engine.git
or by hitting the download button in the git project page

Sincerely,

@co-operation

This comment has been minimized.

Show comment Hide comment
@co-operation

co-operation Jul 29, 2011

Contributor

I downloaded the latest version 2 weeks ago (Version 2.2), together with jquery 1.6.1 - with this version I had the issue.
After a new download today + jQuery 1.6.2 everything works great again! I love it.

Contributor

co-operation commented Jul 29, 2011

I downloaded the latest version 2 weeks ago (Version 2.2), together with jquery 1.6.1 - with this version I had the issue.
After a new download today + jQuery 1.6.2 everything works great again! I love it.

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Aug 2, 2011

I downloaded the last version and I have JQuery 1.6.2 but doesn't work.
It's very weird.
Maybe the problem is that I have the same id, not only the same name.
Is this a problem?

Thanks
Bye

Zanfe commented Aug 2, 2011

I downloaded the last version and I have JQuery 1.6.2 but doesn't work.
It's very weird.
Maybe the problem is that I have the same id, not only the same name.
Is this a problem?

Thanks
Bye

@co-operation

This comment has been minimized.

Show comment Hide comment
@co-operation

co-operation Aug 3, 2011

Contributor

This will not work, because it is no valid html, the id must be unique in a document.

http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

Contributor

co-operation commented Aug 3, 2011

This will not work, because it is no valid html, the id must be unique in a document.

http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

@posabsolute

This comment has been minimized.

Show comment Hide comment
@posabsolute

posabsolute Aug 3, 2011

Owner

You can't have same id, happy its back working, i will create a new package soon, im afraid lots people do not take the edge version

Owner

posabsolute commented Aug 3, 2011

You can't have same id, happy its back working, i will create a new package soon, im afraid lots people do not take the edge version

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Aug 4, 2011

Thanks.
No problem for the ID, I changed them, but the problem is that with the same NAME it doesn't work. It works only with different NAME, but I can't use different NAME.
Any idea?

Zanfe commented Aug 4, 2011

Thanks.
No problem for the ID, I changed them, but the problem is that with the same NAME it doesn't work. It works only with different NAME, but I can't use different NAME.
Any idea?

@co-operation

This comment has been minimized.

Show comment Hide comment
@co-operation

co-operation Aug 4, 2011

Contributor

Did you download the latest version? Attention: it still has the same version-number but some bugs where fixed!
It helped me to resolve this issue.

Contributor

co-operation commented Aug 4, 2011

Did you download the latest version? Attention: it still has the same version-number but some bugs where fixed!
It helped me to resolve this issue.

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Aug 5, 2011

Yes, I have it. I downloaded a lot of times...
Could you attach here the latest version, please? So I can compare my version with the latest?
Thanks

Zanfe commented Aug 5, 2011

Yes, I have it. I downloaded a lot of times...
Could you attach here the latest version, please? So I can compare my version with the latest?
Thanks

@posabsolute

This comment has been minimized.

Show comment Hide comment
@posabsolute

posabsolute Aug 5, 2011

Owner

The last version is currently the same as the latest, package version 2.2.1

Owner

posabsolute commented Aug 5, 2011

The last version is currently the same as the latest, package version 2.2.1

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Aug 8, 2011

Hi,
I have dowloaded the package 2.2.1 and the file JS is just alike the mine one.
Sorry but I have no idea what I have to do.
Bye
Andrea

Zanfe commented Aug 8, 2011

Hi,
I have dowloaded the package 2.2.1 and the file JS is just alike the mine one.
Sorry but I have no idea what I have to do.
Bye
Andrea

@co-operation

This comment has been minimized.

Show comment Hide comment
@co-operation

co-operation Aug 8, 2011

Contributor

Do you have an online example which does not work?

Contributor

co-operation commented Aug 8, 2011

Do you have an online example which does not work?

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Aug 8, 2011

Unfortunately no because the site is again under development.

I can copy here the HTML for the two form:
`


Login:


  • Nome utente



  • Password




>

`

`


Nome utente

Password





Password dimenticata? >

Non sei ancora iscritto? >

`

We use this link for the jquery library:
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
The problem there is also donwloading the version 1.6.2 from the jquery site.

Any help?
Thanks
Bye

Zanfe commented Aug 8, 2011

Unfortunately no because the site is again under development.

I can copy here the HTML for the two form:
`


Login:


  • Nome utente



  • Password




>

`

`


Nome utente

Password





Password dimenticata? >

Non sei ancora iscritto? >

`

We use this link for the jquery library:
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
The problem there is also donwloading the version 1.6.2 from the jquery site.

Any help?
Thanks
Bye

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Aug 10, 2011

Any help?

Zanfe commented Aug 10, 2011

Any help?

@co-operation

This comment has been minimized.

Show comment Hide comment
@co-operation

co-operation Aug 11, 2011

Contributor

Your code works, so the error must be inside your html-head / init or inclusion of js. Please check with a js debugger, it should show you an error.

Your working code (unchanged, just added the html-wrap and include files / W3C valid):
http://data.co-operation.de/test/jquery.validationEngine/

Contributor

co-operation commented Aug 11, 2011

Your code works, so the error must be inside your html-head / init or inclusion of js. Please check with a js debugger, it should show you an error.

Your working code (unchanged, just added the html-wrap and include files / W3C valid):
http://data.co-operation.de/test/jquery.validationEngine/

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Aug 12, 2011

Thanks.

In the first form the problem doesn't exist. The form works.
My problem is in the second form. In my site if I click submit button, for the second form, with the empty fields, the js controll appears in the first form.

In your link (thanks) if you click the submit button in the first form the js works (like in my site), instead if you click the submit button in the second form the js doesn't work.

Me and my js debugger have no idea.

Zanfe commented Aug 12, 2011

Thanks.

In the first form the problem doesn't exist. The form works.
My problem is in the second form. In my site if I click submit button, for the second form, with the empty fields, the js controll appears in the first form.

In your link (thanks) if you click the submit button in the first form the js works (like in my site), instead if you click the submit button in the second form the js doesn't work.

Me and my js debugger have no idea.

@co-operation

This comment has been minimized.

Show comment Hide comment
@co-operation

co-operation Aug 15, 2011

Contributor

I could reproduce the issue. Latest Version, unique id's, no debug errors:
http://data.co-operation.de/test/jquery.validationEngine/

To reproduce, set the focus to first textbox of the second form and press "tab".

Contributor

co-operation commented Aug 15, 2011

I could reproduce the issue. Latest Version, unique id's, no debug errors:
http://data.co-operation.de/test/jquery.validationEngine/

To reproduce, set the focus to first textbox of the second form and press "tab".

@co-operation

This comment has been minimized.

Show comment Hide comment
@co-operation

co-operation Aug 15, 2011

Contributor

If using different names, it works well (as expected):
http://data.co-operation.de/test/jquery.validationEngine/index-different-names.html

Contributor

co-operation commented Aug 15, 2011

If using different names, it works well (as expected):
http://data.co-operation.de/test/jquery.validationEngine/index-different-names.html

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Aug 17, 2011

Hi and thanks.

The first link doesn't work.
The second link works but the problem is that I can't use different names, as written (... with the same field name ...) in the content of the issue.

Zanfe commented Aug 17, 2011

Hi and thanks.

The first link doesn't work.
The second link works but the problem is that I can't use different names, as written (... with the same field name ...) in the content of the issue.

@posabsolute

This comment has been minimized.

Show comment Hide comment
@posabsolute

posabsolute Aug 19, 2011

Owner

Found an hidden bug that would probably be your problem, download latest version (not the package) v2.2.2 should fix your issue

Owner

posabsolute commented Aug 19, 2011

Found an hidden bug that would probably be your problem, download latest version (not the package) v2.2.2 should fix your issue

@Zanfe

This comment has been minimized.

Show comment Hide comment
@Zanfe

Zanfe Aug 22, 2011

Now it works.
Thanks a lot!

Zanfe commented Aug 22, 2011

Now it works.
Thanks a lot!

@lukeamaral

This comment has been minimized.

Show comment Hide comment
@lukeamaral

lukeamaral Sep 13, 2011

this issue still hapens with checkbox fields. I fixed it by changing the lines 642 and 643 from $("input[name='" + name + "']... to $(form).find("input[name='" + name + "']... and adding a var form = field.closest("form"); before line 642. This needs to be fixed in the next version.

this issue still hapens with checkbox fields. I fixed it by changing the lines 642 and 643 from $("input[name='" + name + "']... to $(form).find("input[name='" + name + "']... and adding a var form = field.closest("form"); before line 642. This needs to be fixed in the next version.

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Sep 13, 2011

Collaborator

@lukeamarai: could you please send us a simple page that shows the issue in your context ?

why do you need to lookup the closest form ? please should the html structure with us.

Thank you

Collaborator

orefalo commented Sep 13, 2011

@lukeamarai: could you please send us a simple page that shows the issue in your context ?

why do you need to lookup the closest form ? please should the html structure with us.

Thank you

@lukeamaral

This comment has been minimized.

Show comment Hide comment
@lukeamaral

lukeamaral Sep 14, 2011

I had to do something similar to the following code below.

<form id="sendEmailFoo" action="foo.html" method="POST">
    <input type="checkbox" name="receiver" class="validate[required]" id="clientFoo" value="client@foo.com" />client@foo.com<br />
    <input type="checkbox" name="receiver" class="validate[required]" id="advisorFoo" value="advisor@foo.com" />advisor@foo.com<br />
    <input type="checkbox" name="receiver" class="validate[required]" id="directorFoo" value="director@foo.com" />director@foo.com<br />
    <input type="submit" />
</form>

<form id="sendEmailBar" action="bar.html" method="POST">
    <input type="checkbox" name="receiver" class="validate[required]" id="clientBar" value="client@foo.com" />client@foo.com<br />
    <input type="checkbox" name="receiver" class="validate[required]" id="advisorBar" value="advisor@foo.com" />advisor@foo.com<br />
    <input type="checkbox" name="receiver" class="validate[required]" id="directorBar" value="director@foo.com" />director@foo.com<br />
    <input type="submit" />
</form>

The name of the checkboxes had to be the same in both form.
The issue was that if a checkbox was selected in the first form, the validation in the second form didn't work and vice-versa. The problem is that $("input[name='" + name + "']... checks if at least 1 checkbox with the same name as the current checkbox is checked, but not considering if they are in different forms. By getting the closest form I could make it look into only the checkboxes in the same form as the current checkbox.

I had to do something similar to the following code below.

<form id="sendEmailFoo" action="foo.html" method="POST">
    <input type="checkbox" name="receiver" class="validate[required]" id="clientFoo" value="client@foo.com" />client@foo.com<br />
    <input type="checkbox" name="receiver" class="validate[required]" id="advisorFoo" value="advisor@foo.com" />advisor@foo.com<br />
    <input type="checkbox" name="receiver" class="validate[required]" id="directorFoo" value="director@foo.com" />director@foo.com<br />
    <input type="submit" />
</form>

<form id="sendEmailBar" action="bar.html" method="POST">
    <input type="checkbox" name="receiver" class="validate[required]" id="clientBar" value="client@foo.com" />client@foo.com<br />
    <input type="checkbox" name="receiver" class="validate[required]" id="advisorBar" value="advisor@foo.com" />advisor@foo.com<br />
    <input type="checkbox" name="receiver" class="validate[required]" id="directorBar" value="director@foo.com" />director@foo.com<br />
    <input type="submit" />
</form>

The name of the checkboxes had to be the same in both form.
The issue was that if a checkbox was selected in the first form, the validation in the second form didn't work and vice-versa. The problem is that $("input[name='" + name + "']... checks if at least 1 checkbox with the same name as the current checkbox is checked, but not considering if they are in different forms. By getting the closest form I could make it look into only the checkboxes in the same form as the current checkbox.

@lukeamaral

This comment has been minimized.

Show comment Hide comment
@lukeamaral

lukeamaral Sep 14, 2011

Perhaps I should open a new issue for this since this is already closed.

Perhaps I should open a new issue for this since this is already closed.

@orefalo orefalo reopened this Sep 14, 2011

@ghost ghost assigned orefalo Sep 14, 2011

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Sep 14, 2011

Collaborator

two forms, that's what I thought. your fix makes better sense now. Will fix tomorrow.

Collaborator

orefalo commented Sep 14, 2011

two forms, that's what I thought. your fix makes better sense now. Will fix tomorrow.

@lukeamaral

This comment has been minimized.

Show comment Hide comment
@lukeamaral

lukeamaral Sep 14, 2011

Great.. =)

Great.. =)

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Sep 16, 2011

Collaborator

will fix this weekend. way too busy lately

Collaborator

orefalo commented Sep 16, 2011

will fix this weekend. way too busy lately

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Sep 17, 2011

Collaborator

should be fixed, please try again and close ticket accordingly

Collaborator

orefalo commented Sep 17, 2011

should be fixed, please try again and close ticket accordingly

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Sep 21, 2011

Collaborator

no updates? must be fixed

Collaborator

orefalo commented Sep 21, 2011

no updates? must be fixed

@orefalo orefalo closed this Sep 21, 2011

@lukeamaral

This comment has been minimized.

Show comment Hide comment
@lukeamaral

lukeamaral Sep 21, 2011

I'm sorry. I didn't have time to test it yet. I'll test it later and if I find it still with issue I'll let you know.

I'm sorry. I didn't have time to test it yet. I'll test it later and if I find it still with issue I'll let you know.

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Sep 21, 2011

Collaborator

No worries, just drop a msg it you still find issue. Was just trying my todos from the Issues list. cheers.

Collaborator

orefalo commented Sep 21, 2011

No worries, just drop a msg it you still find issue. Was just trying my todos from the Issues list. cheers.

@slakkie

This comment has been minimized.

Show comment Hide comment
@slakkie

slakkie Nov 15, 2011

Hi,

I'm also experiencing this problem... any news on the fix?

Regards

slakkie commented Nov 15, 2011

Hi,

I'm also experiencing this problem... any news on the fix?

Regards

@slakkie

This comment has been minimized.

Show comment Hide comment
@slakkie

slakkie Nov 15, 2011

Hi

I've taken your one demo page....

I've replicated line 132 to 140 ... the email fieldset simply to the next form id="formID3"

I've removed the ID attribute from both email fields so that there is not conflict.

Thus there is a similar field in both the different forms. If you'll run the page you'll see the problem.

Error: Uncaught jQueryValidate: an ID attribute is required for this field: email class:validate[required,custom[email]] text-input

slakkie commented Nov 15, 2011

Hi

I've taken your one demo page....

I've replicated line 132 to 140 ... the email fieldset simply to the next form id="formID3"

I've removed the ID attribute from both email fields so that there is not conflict.

Thus there is a similar field in both the different forms. If you'll run the page you'll see the problem.

Error: Uncaught jQueryValidate: an ID attribute is required for this field: email class:validate[required,custom[email]] text-input

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Nov 15, 2011

Collaborator

this problem is fixed,
if you still have the problem, you are probably running an old version

Collaborator

orefalo commented Nov 15, 2011

this problem is fixed,
if you still have the problem, you are probably running an old version

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Nov 15, 2011

Collaborator

Actually you problem is different, you need an id on the field.. as it says

Collaborator

orefalo commented Nov 15, 2011

Actually you problem is different, you need an id on the field.. as it says

@slakkie

This comment has been minimized.

Show comment Hide comment
@slakkie

slakkie Nov 15, 2011

Hi.. it is actually the same problem.

Please note the following examples.

This doesn't work:

                    <form id="formID1" class="formular" method="post" action="">
                        <fieldset>
                            <legend>
                                Email
                            </legend>
                            <label>
                                <span>Email address : </span>
                                <input value="forced_error" class="validate[required,custom[email]] text-input" type="text" id="email1" name="email" />
                            </label>
                        </fieldset>
                         <input class="submit" type="submit" value="Validate & Send the form!" />
                         <a href="#" onclick="$('#formID1').validationEngine('hide'); return false;">Hide prompts</a>
                        <hr/>
                    </form>

                    <form id="formID2" class="formular" method="post" action="">
                        <fieldset>
                            <legend>
                                Email
                            </legend>
                            <label>
                                <span>Email address : </span>
                                <input value="forced_error" class="validate[required,custom[email]] text-input" type="text" id="email2" name="email" />
                            </label>
                        </fieldset>                            
                        <input class="submit" type="submit" value="Validate & Send the form!" /><hr/>
                    </form>

slakkie commented Nov 15, 2011

Hi.. it is actually the same problem.

Please note the following examples.

This doesn't work:

                    <form id="formID1" class="formular" method="post" action="">
                        <fieldset>
                            <legend>
                                Email
                            </legend>
                            <label>
                                <span>Email address : </span>
                                <input value="forced_error" class="validate[required,custom[email]] text-input" type="text" id="email1" name="email" />
                            </label>
                        </fieldset>
                         <input class="submit" type="submit" value="Validate & Send the form!" />
                         <a href="#" onclick="$('#formID1').validationEngine('hide'); return false;">Hide prompts</a>
                        <hr/>
                    </form>

                    <form id="formID2" class="formular" method="post" action="">
                        <fieldset>
                            <legend>
                                Email
                            </legend>
                            <label>
                                <span>Email address : </span>
                                <input value="forced_error" class="validate[required,custom[email]] text-input" type="text" id="email2" name="email" />
                            </label>
                        </fieldset>                            
                        <input class="submit" type="submit" value="Validate & Send the form!" /><hr/>
                    </form>
@slakkie

This comment has been minimized.

Show comment Hide comment
@slakkie

slakkie Nov 15, 2011

I need to have a field with the same name in two different forms, so that I can use the same field name on the backend business logic. the problem is that although the ID's should be different in the DOM, al least the names should be able to stay the same in every form respectively?

Thus i want to reuse the same business logic over and over ... hope it makes sense.

slakkie commented Nov 15, 2011

I need to have a field with the same name in two different forms, so that I can use the same field name on the backend business logic. the problem is that although the ID's should be different in the DOM, al least the names should be able to stay the same in every form respectively?

Thus i want to reuse the same business logic over and over ... hope it makes sense.

@slakkie

This comment has been minimized.

Show comment Hide comment
@slakkie

slakkie Nov 15, 2011

I downloaded the latest packaged ZIp ?

slakkie commented Nov 15, 2011

I downloaded the latest packaged ZIp ?

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Nov 15, 2011

Collaborator

checkout from master

I don't remember the details, I believe the ID should be unique on the page.

Collaborator

orefalo commented Nov 15, 2011

checkout from master

I don't remember the details, I believe the ID should be unique on the page.

@slakkie

This comment has been minimized.

Show comment Hide comment
@slakkie

slakkie Nov 15, 2011

quickly gonna have a look, let you know back in few minutes. thanks for replying so promptly!!!

slakkie commented Nov 15, 2011

quickly gonna have a look, let you know back in few minutes. thanks for replying so promptly!!!

@slakkie

This comment has been minimized.

Show comment Hide comment
@slakkie

slakkie Nov 15, 2011

Looks like it is working since i downloaded the source directly from the master. Maybe it is time to update those packages ;)..... would have saved me and probably many other hundreds of hours... because we really like your validation. Thanks for it and don't stop to make it even cooler!!!

slakkie commented Nov 15, 2011

Looks like it is working since i downloaded the source directly from the master. Maybe it is time to update those packages ;)..... would have saved me and probably many other hundreds of hours... because we really like your validation. Thanks for it and don't stop to make it even cooler!!!

@orefalo

This comment has been minimized.

Show comment Hide comment
@orefalo

orefalo Nov 16, 2011

Collaborator

sorry, we can't release on every patch.

Collaborator

orefalo commented Nov 16, 2011

sorry, we can't release on every patch.

@posabsolute

This comment has been minimized.

Show comment Hide comment
@posabsolute

posabsolute Nov 16, 2011

Owner

Will make a new package this week, since its a bug issue

Owner

posabsolute commented Nov 16, 2011

Will make a new package this week, since its a bug issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment