asked on

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

Julian Hansen

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

Panos

ASKER

Hi
I know how to validate for each step with custpm code. In this case i wanted to use the plugin to do this.

Julian Hansen

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.

?

Panos

ASKER

Yes exactly.
Validate the step and show the next one.

Julian Hansen

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

Panos

ASKER

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)

Julian Hansen

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?

Panos

ASKER

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.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

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

Start Free Trial

Panos

ASKER

It is an option that IS working.
Do i need the bootstrap plugin. I think it is working without it too.

Julian Hansen

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.

Panos

ASKER

Thank very much for your help

Julian Hansen

You are most welcome.