troubleshooting Question

jQuery-Validation-Engine with steps

Avatar of Panos
PanosFlag for Germany asked on
JavaScriptjQuery
13 Comments1 Solution817 ViewsLast Modified:
Hello experts.
I need help to use the posabsolute/jQuery-Validation-Engine with steps. I want to use the advantage of the 'class' validation that i can set dynamically and will make the job easier fore me.
I read in the docs that the plugin is validating only forms. (or not?). I have a test code that isn t working. i 'm validating every time the form and not the fields in the visible div and somehow if i sumbit the second button (div step_2) i don't get the visible the third step.
Thank you in advance for any help
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="js/validationengine/css/validationEngine.jquery.css" rel="stylesheet" type="text/css">
<style type="text/css">
body{color:#003c68;font-family:font-family:Verdana,Helvetica,Arial,Sans-Serif;font-size:18px;}
input{ width:160px;}
select{ width:160px;}
</style>

<title>Test validation</title>
</head>
<body>
<br>
<br><form id="form_1">
<div id="testdiv">
 <div id="step_1" class="step">
   <input type="text" name="testname" id="testname" value="" class="validate[required]">
   <br>
   <br>
   <select name="test" class="test validate[required] select" id="test">
    <option value="">please select</option>
    <option value="1">first option</option>
   </select>
   <br>
   <button class="next">Next</button>
  </div>
  <div id="step_2" class="step" style="display:none;">
   This is the second step
   <br>
   <input type="text" name="testname2" id="testname2" value="" class="validate[required]">
   <br>
    <br>
   <button class="next">Next</button>
  </div>
  <div id="step_3" class="step" style="display:none;">
   This is the third step
   <br>
   <button class="send">Submit</button>
  </div>
</div>
</form>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/validationengine/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="js/validationengine/js/jquery.validationEngine-en.js"></script>
<script type="text/javascript">

$(function() {
	$('#testdiv').on("click", ".next", function(event) {
		var current = $('div.step:visible');
		alert(current.attr('id'));
		var next = current.next();
		$("#form_1").validationEngine({
		  onValidationComplete: function(form, status){ 
		  alert(status);
                if (status == true) { 
				current.hide();
			    next.show(); 
                }else { }
		  }}
		);
	});
	$('#testdiv').on("click", ".send", function(event) {
		$("#form_1").validationEngine({
		  onValidationComplete: function(form, status){ 
                if (status == true) {
					alert('The form is submitted') 
				//code to submit the form via ajax 
                }else { }
		  }}
		);
	});
    
 }
);


</script>
</body>
</html>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 13 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 13 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros