Solved

Jquery Validate Plugin, error message visible in hidden element

Posted on 2010-09-17
35
628 Views
Last Modified: 2012-05-10
Hi,

I have made a form with the Jquery Validate Plugin from (http://bassistance.de/jquery-plugins/jquery-plugin-validation/)

The form works well except for two error messages at the top of the form.

When I hit submit without filling anything in there are 3 error messages visible but only one must be vissible.


When I click on one of the radio buttons a hidden textarea shows up and two error messages are visible but only one needs to be visible.


The form can be found at: http://www.expanism-webdesign.nl/test/

I hope some one can help me out with this.

Thanks,
Edski
0
Comment
Question by:edski73
  • 17
  • 12
  • 5
35 Comments
 
LVL 14

Expert Comment

by:ddsh79
ID: 33700607
I believe the problem is due to you are validating two different textarea fields while you can enter value to only one.

Use only one and you can identify the text entered for which radio on the basis of radio button selected.

To display the textarea you can use two different span elements and can place the textarea in the span on the basis of selection of radio.

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33700672
That message is for textAreas, and they are coming twice because you have 2 text areas, and both are required to be filled.

i would suggest that you disable the text area when you hide them and when you make them visible, enable them back.

please check this link, it tell to ignore the hidden fields
http://stackoverflow.com/questions/2623514/jquery-validate-ignore-elements-with-style
and this one ignores the disabled ones
http://stackoverflow.com/questions/379838/using-depends-with-the-jquery-validation-plugin


0
 

Author Comment

by:edski73
ID: 33700733
Hi ddsh79,

Thanks for your information, I don't understand what you mean by :

To display the textarea you can use two different span elements and can place the textarea in the span on the basis of selection of radio.

If I do that I still have two textarea's?

Can you please provide some sample code if possible?

Thanks,
Edski
0
 
LVL 14

Expert Comment

by:ddsh79
ID: 33700785
<p>
<input type="radio" id="a1" name="vraag1" value="ja" class="valid" onclick="setthis('a1_open')"/>
<label class="push" for="a1">Ja</label><label for="vraag1" generated="true" class="error" style="display: none;">Maak een keuze</label>
<span id="a1_open" class="gray">
</span>
<br/>
<input type="radio" id="b1" name="vraag1" value="nee" class="valid" onclick="setthis('b1_open')"/> <label for="b1">Nee</label>
<span id="b1_open" class="">

</span>
</p>
<script type="text/javascript">
function setthis(elem){
if(elem=="a1_open"){
document.getElementById(elem).innerHTML= '<label class="push" for="a1ja">motiveer uw antwoord, wat wel en wat niet:</label><textarea cols="" rows="" name="a1ja" class="areafield valid" id="a1ja"/><label for="a1ja" generated="true" class="error" style="display: none;">Vul hier een beschrijving in</label>';
}else{
document.getElementById(elem).innerHTML='<label class="push" for="b1nee">motiveer uw antwoord, wat wel en wat niet:</label><textarea cols="" rows="" name="b1nee" class="areafield error" id="b1nee"/><label for="b1nee" generated="true" class="error" style="display: inline;">Vul hier een beschrijving in</label>';
}
}
</script>
0
 
LVL 14

Expert Comment

by:ddsh79
ID: 33700828
replacing textarea with script can cause some problem so replace <textarea/> with <textarea></textarea>
0
 

Author Comment

by:edski73
ID: 33701130
Hi ddsh79,

Thanks for the code it almost works.

When I hit submit without filling in anthing and after that I check the radio buttons the first text area is outlined gray but the second is outlined red.

http://www.expanism-webdesign.nl/test/

is it possible to have the code validate to xhtml strict

h
0
 

Author Comment

by:edski73
ID: 33701166
Hi ddsh79,

When I fill in the second textarea the red border is not removed and has to go away when fillin in.

Thanks,
Edski
0
 
LVL 14

Expert Comment

by:ddsh79
ID: 33701172
my bad

in the second replacement i have added the class as class="areafield error" instead of valid.

You can modify the script to meet the requirement.
0
 

Author Comment

by:edski73
ID: 33701206
Hi gurvinder372,

I tried your solution but it didnt worked for me, can you perhaps send me a sample code of where exactly i have to put the code in my javascript on http://www.expanism-webdesign.nl/test/

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33701228
Sure, gimme some time.
0
 

Author Comment

by:edski73
ID: 33701341
Hi gurvinder372,

I added a new test file because the original i have changed with new test script from ddsh79

Here is the new file

http://www.expanism-webdesign.nl/test/test2.html

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33701393
I am not sure if i am getting the problem, since i tried 2 cases
1) without selecting any thing,
No error message came
2) clicked on one radio button, first one
1 error message came
3) clicked on one radio button, second one
2 error messages came

I noticed in the setThis method, you are setting display: none for error for a1ja and display: inline; for b1nee.
Any reason for that?
Can you make display:none for both and try?
0
 

Author Comment

by:edski73
ID: 33701445
Hi ddsh79,

I changed the class but there are still problems.
If I submit without filling in anything and after that I check radio button one the textarea is vissible when I submit again without fillin in the textarea the error message works.

But when I switch to the second radio button the error message from the first radio button stays vissible.

It is also not jumping to the top of the page when submitting, to be pointed at the missing textareas/radio buttons.

Thanks,
Edski
0
 

Author Comment

by:edski73
ID: 33701507
Hi gurvinder372,

Sorry that script had to be removed, can you please check again?

http://www.expanism-webdesign.nl/test/test2.html

Thanks,
Edski
0
 

Author Comment

by:edski73
ID: 33701539
Hi gurvinder372,

I would like to try the ignore: but don't know how to place them in the jquery scripts I use on the page:
http://www.expanism-webdesign.nl/test/test2.html

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33701590
For using ignore option, you need to give a class to all those hidden elements which you want to validate.
I.e, when they are hidden give them a class (say hiddenElements), and when you show them, remove that class

.hiddenElements
{
   display: none;
}

So, then you can add this option at line number 115

ignore: ":hidden",
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33701602
Sorry the line should be

ignore: ".hiddenElements",

0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:edski73
ID: 33701729
Hi gurvinder372,

I tried but the textareas aren't vissible when selecting one of the two radio buttons you can see the code in:
http://www.expanism-webdesign.nl/test/test2.html

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33701799
See this, you need to do the same for others

add this to the document.ready function only
$("#a1").bind("click", function(){
      if( $(this).is(':checked') )
      {
            $("#a1ja").removeClass("hiddenElements");
      }
      else
      {
            $("#a1ja").addClass("hiddenElements");
      }
});

update this text area with
<textarea id="a1ja" class="areafield hiddenElements" name="a1ja" rows="" cols=""></textarea>
0
 

Author Comment

by:edski73
ID: 33702030
Hi gurvinder372,

I have placed your code but it still is not working you can see it here:
http://www.expanism-webdesign.nl/test/test2.html

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33702203
I see this line
ignore: ".hiddenElements",
at line number 139, inside the rules section, it should be outside

put it after rules section, line 145

check here
http://docs.jquery.com/Plugins/Validation/validate#options
0
 

Author Comment

by:edski73
ID: 33702302
gurvinder372,

Ok I changed that and when I hit submit without fillin in anything in the form there is only one error message, verry happy with that! :)

But when I submit once again with one radio button selected and without fillin in the textarea both of the error messages are vissible again but only one of them is needed.

Could you please take another look at the code.

Thanks
Edski
0
 

Author Comment

by:edski73
ID: 33702315
Hi gurvinder372,

This is the file:
http://www.expanism-webdesign.nl/test/test2.html

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33702321
ok, try this
after replacing the previous ones of course :)


$("#a1").bind("click", function(){
	      if( $(this).is(':checked') )
	      {
	            $("#a1ja").removeClass("hiddenElements");
	            $("#b1nee").addClass("hiddenElements");
	      }
	      else
	      {
	            $("#a1ja").addClass("hiddenElements");
	      }
	});
	
	$("#b1").bind("click", function(){
	      if( $(this).is(':checked') )
	      {
	            $("#b1nee").removeClass("hiddenElements");
	            $("#a1ja").addClass("hiddenElements");
	      }
	      else
	      {
	            $("#b1nee").addClass("hiddenElements");
	      }
	});

Open in new window

0
 

Author Comment

by:edski73
ID: 33702463
Hi gurvinder372,

Almost perfect!

When I don't fill in anything and submit only one error message, good :)

When I check radio button one and don't fill the textarea and hit submit again only one error message, good :)

But when I switch to radio button two the error message jumps to the fist checkbox...

And when I submit again (still not fillin in the textarea) the jump error dissapears and the error message from the second radio button shows up that's good.

But when I now switch from radio buttons the error messages are switching the wrong way...

Could you please take another look at it

Thanks,
Edski
0
 

Author Comment

by:edski73
ID: 33702684
Hi gurvinder372,

Another problem...

When fillin in textarea one and then swithing to the second radio button and fillin in the second textarea the information from textarea one and two are being submitted but only one of the two has to be submitted.

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33704122
<<http://www.expanism-webdesign.nl/test/test2.html>> Is this the link i need to check?
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33704169
<<When fillin in textarea one and then swithing to the second radio button and fillin in the second textarea the information from textarea one and two are being submitted but only one of the two has to be submitted.>>

For this to be the case, you need to have only one textarea. But now since you have 2 textareas, it will submit both.

You can try disabling the other one before submitting.

Just before submitting, put this code, it is disabling those text areas which are hidden

$("textarea.hiddenElements").attr("disabled", "disabled");

Let me know if this works
0
 

Author Comment

by:edski73
ID: 33704669
Hi gurvinder372,

Yes that is the link:
http://www.expanism-webdesign.nl/test/test2.html

Thanks,
Edski
0
 

Author Comment

by:edski73
ID: 33704738
Hi gurvinder372,

I tried the code but it is not working, can you perhaps give me an example of using one textarea?

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33708257
what solution have you found?
0
 

Accepted Solution

by:
edski73 earned 0 total points
ID: 33708480
gurvinder372,

I will not hide the textarea's anymore and just use one visible textarea.

Thanks for the help!

Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33708580
You are welcome.
But if you are not using my solution, then you do not need to award points to me.
Thanks for the points to me.

0
 
LVL 14

Expert Comment

by:ddsh79
ID: 33741881
The accepted solution looks similar to the one which i have suggested (33700607)

0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now