Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
co-operation opened this Issue · 48 comments

6 participants

Marius Cedric Dugas Andrea Zanferrari Olivier Refalo lukeamaral slakkie
Marius

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.

Marius

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

Cedric Dugas
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

Andrea Zanferrari

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

Thanks in advance
Bye
Andrea

Cedric Dugas
Owner

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

Andrea Zanferrari

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

Thanks
Bye

Olivier Refalo
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,

Marius

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.

Andrea Zanferrari

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

Marius

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

Cedric Dugas
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

Andrea Zanferrari

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?

Marius

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.

Andrea Zanferrari

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

Cedric Dugas
Owner

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

Andrea Zanferrari

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

Marius

Do you have an online example which does not work?

Andrea Zanferrari

Unfortunately no because the site is again under development.

I can copy here the HTML for the two form:
<form id="login-form" action="/do.login.redirect/" method="POST">
<span class="label">Login:</span>
<ul class="float-left">
<li>
<label for="id_top_username" class="required">Nome utente</label>
<input id="id_top_username" class="input-txt validate[required]" maxlength="32" type="text" name="username" value="" />
</li>
<li>
<label for="id_top_password" class="required">Password</label>
<input id="id_top_password" class="input-txt validate[required]" maxlength="32" type="password" name="password" value="" />
</li>
</ul>
<input type="hidden" name="path" value="/it/" />
<button type="submit" class="submit">></button>
</form>

<form class="border-shadow box no-display ajax" action="/do.login.redirect/" method="post" id="form-docs">
<label class="required" for="id_username">Nome utente</label>
<input class="input-txt validate[required]" maxlength="32" id="id_username" type="text" name="username" value="" />
<label class="required" for="id_password">Password</label>
<input class="input-txt validate[required]" maxlength="32" id="id_password" type="password" name="password" value="" />
<input type="hidden" name="path" value="/it/soci/area-riservata/" />
<input type="hidden" name="failpath" value="/it/associazione/documenti-istituzionali/" />
<input type="submit" class="submit float-right" value="ENTRA &gt;" />
<p class="clear-right">
<a href="">Password dimenticata? <span>&gt;</span></a><br />
<a href="">Non sei ancora iscritto? <span>&gt;</span></a>
</p>
</form>

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

Andrea Zanferrari

Any help?

Marius

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/

Andrea Zanferrari

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.

Marius

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".

Andrea Zanferrari

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.

Cedric Dugas
Owner

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

Andrea Zanferrari

Now it works.
Thanks a lot!

lukeamaral

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.

Olivier Refalo
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

lukeamaral

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

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

Olivier Refalo orefalo reopened this
Olivier Refalo orefalo was assigned
Olivier Refalo
Collaborator

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

lukeamaral

Great.. =)

Olivier Refalo
Collaborator

will fix this weekend. way too busy lately

Olivier Refalo
Collaborator

should be fixed, please try again and close ticket accordingly

Olivier Refalo
Collaborator

no updates? must be fixed

Olivier Refalo orefalo closed this
lukeamaral

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.

Olivier Refalo
Collaborator

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

slakkie

Hi,

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

Regards

slakkie

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

Olivier Refalo
Collaborator

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

Olivier Refalo
Collaborator

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

slakkie

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

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

I downloaded the latest packaged ZIp ?

Olivier Refalo
Collaborator

checkout from master

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

slakkie

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

slakkie

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!!!

Olivier Refalo
Collaborator

sorry, we can't release on every patch.

Cedric Dugas
Owner

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
Something went wrong with that request. Please try again.