jQuery-Validation-Engine with steps

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>

Open in new window

LVL 2
PanosAsked:
Who is Participating?
 
Julian HansenCommented:
If you submit via ajax you can split the data into 3 forms and then combine the data in the AJAX call using  $('form').serialize();
Consider this example
	<form id="form1">
		<input type="text" name="form1name" />
	</form>
	<form id="form2">
		<input type="text" name="form2name" />
	</form>
	<form id="form3">
		<input type="text" name="form3name" />
	</form>
	<button class="btn btn-primary">Save</button>

Open in new window

jQuery
$(function() {
	$('button').click(function() {
		var data = $('form').serialize();
		console.log(data);
	});
});

Open in new window

The output from the above will be the data from all three forms (working sample here)

Using this approach you can bind the validation to each form and the submit button of each form to trigger the next step.
0
 
Julian HansenCommented:
If I understand the question you are trying to implement a wizard type interface with validation at each step - is that correct?
0
 
PanosAuthor Commented:
Hi
I know how to validate for each step with custpm code. In this case i wanted to use the plugin to do this.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Julian HansenCommented:
Ok but I am trying to understand the problem.

You have a wizard.

Each step there is validation.

You want to validate only the step that you are on.

?
0
 
PanosAuthor Commented:
Yes  exactly.
Validate the step and show the next one.
0
 
Julian HansenCommented:
It sounds like you need to dynamically apply the validation rules as each step is initiated - have you explored that option?
0
 
PanosAuthor Commented:
I'm sorry but i don't understand what you mean.
Sorry for the bad explanation.
(I want to validate each step by pressing the next buttons and on the last step i want to submit the form to the server if all validation has passed)
0
 
Julian HansenCommented:
Yes I understand - what I am asking is have you explored the option of dynamically adding the validation to the container of each step only when the next button is clicked.

So when the application loads validation is only bound to step 1. After next is clicked you remove that validation and bind validation to the container for step 2 and so on?
0
 
PanosAuthor Commented:
I got it now.
I understand what you mean. I would prefer not to use this option. The query to get all the data and split it in steps is complicated and i don't want to make again calls to the server.
Having this option in mind i could load the data for each step. Well that is an option but i have to rewrite all the code and instead of one call i will have 4-5.
One other option is to validate only the visible elements if that could be done.I don t know how or  another option  split the form in forms to each step and finally post the values of all the forms. Well i don t know if that is a good idea too.
0
 
PanosAuthor Commented:
It is an option that IS working.
Do i need the bootstrap plugin. I think it is working without it too.
0
 
Julian HansenCommented:
Do you mean in my sample? If so then no - the sample is based on a boiler plate I created for samples that includes the common libraries and stylesheets - in this particular case only the jQuery library is required for the sample to work.
0
 
PanosAuthor Commented:
Thank very much for your help
0
 
Julian HansenCommented:
You are most welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.