We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Jquery validation - show hide

Panos
Panos asked
on
Medium Priority
1,789 Views
Last Modified: 2012-05-11
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

Comment
Watch Question

Eddie ShipmanAll-around developer
CERTIFIED EXPERT

Commented:
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.

Author

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.

Author

Commented:
Maybe you can propose a better  way to handle this.
Senior Software Engineer
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Eddie ShipmanAll-around developer
CERTIFIED EXPERT

Commented:
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.

Author

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.




Author

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

Author

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>
Roman GhermanSenior Software Engineer

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

Author

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.

Author

Commented:
thank you for your help
regards
panos
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.