jQuery-Validation-Engine with steps
Hello experts.
I need help to use the posabsolute/jQuery-Validat
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
I need help to use the posabsolute/jQuery-Validat
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>
Last Comment
Julian Hansen
If I understand the question you are trying to implement a wizard type interface with validation at each step - is that correct?
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.
I know how to validate for each step with custpm code. In this case i wanted to use the plugin to do this.
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.
?
You have a wizard.
Each step there is validation.
You want to validate only the step that you are on.
?
ASKER
Yes exactly.
Validate the step and show the next one.
Validate the step and show the next one.
It sounds like you need to dynamically apply the validation rules as each step is initiated - have you explored that option?
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)
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)
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?
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?
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.
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
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
It is an option that IS working.
Do i need the bootstrap plugin. I think it is working without it too.
Do i need the bootstrap plugin. I think it is working without it too.
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.
ASKER
Thank very much for your help
You are most welcome.
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
