• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1612
  • Last Modified:

Jquery validation - show hide

Hello experts.
I need help to finish my formvalidation.I'm using jquery plugin from here:http://www.position-absolute.com/

Now in detail.
I have a form splitted in 3 areas .The second area is inside a div shippinginformation.
I have also  a checkbox id="SameAsBillingInfo" with show hide function for the above id.
And final a link to close the bubbles:<a onClick="$.validationEngine.closePrompt('.formError',true)" href="##">close bubble</a>
1.The first problem i have is that i want to stop the validation for this area (div shippinginformation )if it is hidden
2.If i check the check box the bubble must close too.

Any help?
<link rel="stylesheet"  href="js/posabsolute-jQuery-Validation-Engine/css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/posabsolute-jQuery-Validation-Engine/js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/posabsolute-jQuery-Validation-Engine/js/jquery.validationEngine.js" type="text/javascript"></script>
    <script>
		$(document).ready(function() {
			// SUCCESS AJAX CALL, replace "success: false," by:     success : function() { callSuccessFunction() }, 
			$("#form1").validationEngine({
                validationEventTriggers:"keyup blur",  //will validate on keyup and blur 
				scroll:false,
				success :  false,
				failure : function() {} 
			})
		});
		</script>
        
<a onClick="$.validationEngine.closePrompt('.formError',true)" href="##">close bubble</a>

<script type="text/javascript">
function togglecheckhandler(obj)
{
	if(obj.checked)
	{	$("#shippinginformation").fadeOut("slow");}
	else
	{	$("#shippinginformation").fadeIn("slow");}
}
</script>
<form id="form1">
<input name="SameAsBillingInfo" type="checkbox" id="SameAsBillingInfo" value="SameAsBillingInfo" onClick="togglecheckhandler(this)">&nbsp;<span>Check here if ship inforfation  ....bill information </span>
           A.formfields
       <div id="shippinginformation">......B.form fields.......</div>
       C.Formfields
</form>

Open in new window

0
Panos
Asked:
Panos
  • 7
  • 2
  • 2
1 Solution
 
Eddie ShipmanAll-around developerCommented:
For something like this, it is better to give link to a "working" url.
Mainly it is because we need to see how it currently works .vs how you want it to work.

If that is possible, please post one.
0
 
PanosAuthor Commented:
Hi EddieShipman.
I have created a testpage with all the working stuff.
I have this on my laptop.It is possible for you to check this if i now what time you can do this so that i can open my router and firewall.
This is the link: http://ierotheos.selfip.com/testpage2.html
it is open now.
0
 
PanosAuthor Commented:
Maybe you can propose a better  way to handle this.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Roman GhermanCommented:
try the solution from here:

http://stackoverflow.com/questions/4220049/how-do-you-ignore-hidden-page-elements-when-validating-using-jquery-validationeng

or you could use ignore option from validation.
For example - when checkbox is checked then add a class to the elements inside: ".ignore"
and when unchecking remove that class from those elements.

and add validation like this
$("#myform").validate({
   ignore: ".ignore"
})

More details on how to use ignore option here:
http://docs.jquery.com/Plugins/Validation/validate#toptions
0
 
Eddie ShipmanAll-around developerCommented:
Is it possible to have the shipping info in a separate form and submit it via JavaScript when the first form is submitted? This way, you can have two separate validations.
0
 
PanosAuthor Commented:
Hi roma1123.
I just saw your comment but unfortunately i have to leave for a few hours.
I did add a ignore class to one element but the validation is still working on that.
I will come back to check your solution again.




0
 
PanosAuthor Commented:
Here i'm back
EddieShipman i prefer to have one form because i'm using a serverside validation if javascript is disabled.
0
 
PanosAuthor Commented:
I tried the solution from roma1123 and it is working:
<script type="text/javascript">
function togglecheckhandler(obj)
{
if(obj.checked)
{      
  $("#shippinginformation").fadeOut("slow");
  $("#shipstate").removeClass("validate[required]");
  $("#shipcountry").removeClass("validate[required]");
  $("#shipnomos").removeClass("validate[required]");
  $("#shiplastname").removeClass("validate[required,custom[onlyLetter]]");
  $("#shipfirstname").removeClass("validate[required,custom[onlyLetter]]");
  $.validationEngine.closePrompt('.formError',true)
  }
else
{ $("#shippinginformation").fadeIn("slow");
  $("#shipstate").addClass("validate[required]");
  $("#shipcountry").addClass("validate[required]");
  $("#shipnomos").addClass("validate[required]");
  $("#shiplastname").addClass("validate[required,custom[onlyLetter]]");
  $("#shipfirstname").addClass("validate[required,custom[onlyLetter]]");
  }
}
</script>
0
 
Roman GhermanCommented:
great, means that my comment is the solution then :)
0
 
PanosAuthor Commented:
Yes exactly.
I will wait a few minutes before i close the question.Ma be EddieShipman has another solution that i can accept too.Thank you.
0
 
PanosAuthor Commented:
thank you for your help
regards
panos
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 7
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now