Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 646
  • Last Modified:

Jquery Validate Plugin, error message visible in hidden element

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
edski73
Asked:
edski73
  • 17
  • 12
  • 5
1 Solution
 
Dushyant SharmaCommented:
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
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Dushyant SharmaCommented:
<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
 
Dushyant SharmaCommented:
replacing textarea with script can cause some problem so replace <textarea/> with <textarea></textarea>
0
 
edski73Author Commented:
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
 
edski73Author Commented:
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
 
Dushyant SharmaCommented:
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
 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
Sure, gimme some time.
0
 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
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
 
edski73Author Commented:
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
 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
Gurvinder Pal SinghCommented:
Sorry the line should be

ignore: ".hiddenElements",

0
 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
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
 
edski73Author Commented:
Hi gurvinder372,

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

Thanks,
Edski
0
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
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
 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
<<http://www.expanism-webdesign.nl/test/test2.html>> Is this the link i need to check?
0
 
Gurvinder Pal SinghCommented:
<<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
 
edski73Author Commented:
Hi gurvinder372,

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

Thanks,
Edski
0
 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
what solution have you found?
0
 
edski73Author Commented:
gurvinder372,

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

Thanks for the help!

Edski
0
 
Gurvinder Pal SinghCommented:
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
 
Dushyant SharmaCommented:
The accepted solution looks similar to the one which i have suggested (33700607)

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 17
  • 12
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now