asked on

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

Eddie Shipman

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.

Panos

ASKER

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.

Panos

ASKER

Maybe you can propose a better way to handle this.

ASKER CERTIFIED SOLUTION

Roman Gherman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eddie Shipman

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.

Panos

ASKER

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.

Panos

ASKER

Here i'm back
EddieShipman i prefer to have one form because i'm using a serverside validation if javascript is disabled.

Panos

ASKER

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>

Roman Gherman

great, means that my comment is the solution then :)

Panos

ASKER

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.

Panos

ASKER

thank you for your help
regards
panos