Solved

jQuery-Validation-Engine with steps

Posted on 2016-10-12
13
54 Views
Last Modified: 2016-10-13
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

0
Comment
Question by:Panos
  • 7
  • 6
13 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41841451
If I understand the question you are trying to implement a wizard type interface with validation at each step - is that correct?
0
 
LVL 2

Author Comment

by:Panos
ID: 41841458
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41841472
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
 
LVL 2

Author Comment

by:Panos
ID: 41841482
Yes  exactly.
Validate the step and show the next one.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41841664
It sounds like you need to dynamically apply the validation rules as each step is initiated - have you explored that option?
0
 
LVL 2

Author Comment

by:Panos
ID: 41841677
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41841689
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
 
LVL 2

Author Comment

by:Panos
ID: 41841703
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41841716
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
 
LVL 2

Author Comment

by:Panos
ID: 41841761
It is an option that IS working.
Do i need the bootstrap plugin. I think it is working without it too.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41841791
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
 
LVL 2

Author Closing Comment

by:Panos
ID: 41841936
Thank very much for your help
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41841960
You are most welcome.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now