jQuery-Validation-Engine with steps

Panos
Panos used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
If I understand the question you are trying to implement a wizard type interface with validation at each step - is that correct?

Author

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.
Most Valuable Expert 2017
Distinguished Expert 2018

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

?

Author

Commented:
Yes  exactly.
Validate the step and show the next one.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
It sounds like you need to dynamically apply the validation rules as each step is initiated - have you explored that option?

Author

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)
Most Valuable Expert 2017
Distinguished Expert 2018

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

Author

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.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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.

Author

Commented:
It is an option that IS working.
Do i need the bootstrap plugin. I think it is working without it too.
Most Valuable Expert 2017
Distinguished Expert 2018

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

Author

Commented:
Thank very much for your help
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are most welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial