Solved

jQuery-Validation-Engine button onclick problem

Posted on 2016-10-22
13
28 Views
Last Modified: 2016-10-23
Hello experts.
I 'm using jquery-validation-engine to validate two forms in two steps using the onclick function.
Using a button inside the forms it is working fine.
Using a button outside the forms for both steps (forms) it is not validating.
Any help?
My code is:
<div id="testdiv">
 <div id="step_1" class="step">
  <form id="form_1" >
   <input type="text" name="testname" id="testname" value="" data-validation-engine="validate[required,custom[onlyNumber]]">
   <br>
   <br>
   <select name="test" data-validation-engine="validate[required]" class="test select" id="test" style="width:120px;">
    <option value="">please select</option>
    <option value="1">first option</option>
   </select>
   <br>
  <!--<button class="next">Next &raquo;</button>-->
   </form>
  </div>
  <div id="step_2" class="step" style="display:none;">
   <form id="form_2" >
   This is the second step
   <br>
   <input type="text" name="testname2" id="testname2" value="" data-validation-engine="validate[required]">
   <br>
<!--<button class="next">Next &raquo;</button>-->
    <br>
   </form>
  </div>    
</div>
 <button class="next">Next &raquo;</button>
<script type="text/javascript">
$(function() {
	$('#testdiv').on("click", ".next", function(event) {
		var current = $('div.step:visible');
		var next = current.next();
		//var formele = $(this).closest('form');
		var formele = current.find('form:first')
		formele.validationEngine({
		  prettySelect: true, 
		  autoPositionUpdate: true, 
		  validateNonVisibleFields: true ,
		  addSuccessCssClassToField: 'ui-state-valid',
		  addFailureCssClassToField: "ui-state-error",
		  onValidationComplete: function(form, status){ 
		        if (status == true) {
				current.hide();
			    next.show(); 
                }else { }
		  }}
		);
	});
 }
);</script>

Open in new window

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

Expert Comment

by:Julian Hansen
ID: 41854926
Take a look at your markup
<div id="testdiv">
...
</div>
<button class="next">Next &raquo;</button>

Open in new window

Now look at your jQuery
$('#testdiv').on("click", ".next", function(event) {

Open in new window

Do you see a (non commented) element with class .next inside that <div>?

You are binding the .on() relative to the '#testdiv' which means it is going to intercept the click and pass to its children. No children with class .next therefore no event fired.
0
 
LVL 2

Author Comment

by:Panos
ID: 41854938
Hi.
Yes indeed you are right. I made so many tests and the posted code was not correct. I changed to the following code and it is still not working.
<div id="testdiv">
 <div id="step_1" class="step">
  <form id="form_1" >
   <input type="text" name="testname" id="testname" value="" data-validation-engine="validate[required,custom[onlyNumber]]">
   <br>
   <br>
   <select name="test" data-validation-engine="validate[required]" class="test select" id="test" style="width:120px;">
    <option value="">please select</option>
    <option value="1">first option</option>
   </select>
   <br>
  <!--<button class="next">Next &raquo;</button>-->
   </form>
  </div>
  <div id="step_2" class="step" style="display:none;">
   <form id="form_2" >
   This is the second step
   <br>
   <input type="text" name="testname2" id="testname2" value="" data-validation-engine="validate[required]">
   <br>
    <br>
   </form>
  </div>
  <button class="next">Next &raquo;</button>   
</div>

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41855106
Next problem
<div id="step_2" class="step" style="display:none;">
  <form id="form_2" >
    This is the second step
     <br>
     <input type="text" name="testname2" id="testname2" value="" data-validation-engine="validate[required]">
     <br>
      <br>
   </form>
</div>
<button class="next">Next &raquo;</button>   

Open in new window

$('#testdiv').on("click", ".next", function(event) {
   ...
   // what is this for - never going to find a form and nuked in the next line?
   var formele = $(this).closest('form');

Open in new window

What version of the validationEngine are you using - can't find validateNonVisibleFields in the docs.
0
 
LVL 2

Author Comment

by:Panos
ID: 41855114
I m using version Validation Engine 2.6.2
For: validateNonVisibleFields: true
I did find some posts to use this for hidden fields.
This is not important. I can remove this.
For this :var formele = $(this).closest('form');
//find the visible step
var current = $('div.step:visible');
// find the form to validate
var formele = current.find('form:first')

Is this wrong;
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41855143
:var formele = $(this).closest('form');

Open in new window

Yup - never going to find it because $(this) is the button and it is not a child of a <form>
Beside the point though because this line
var formele = current.find('form:first')

Open in new window

Overrides it.
0
 
LVL 2

Author Comment

by:Panos
ID: 41855525
Hi Julian Hansen
Sorry for the delay but i'm working weekend and i had to leave from my working pc at home.
For your last post:
This is a comment : var formele = $(this).closest('form'); and it is working with the commented button in the first form.
To clear what i have done after your posts i have now following:
<div id="testdiv">
 <div id="step_1" class="step">
  <form id="form_1" >
   <input type="text" name="testname" id="testname" value="" data-validation-engine="validate[required,custom[onlyNumber]]">
   <br>
   <br>
   <select name="test" data-validation-engine="validate[required]" class="test select" id="test" style="width:120px;">
    <option value="">please select</option>
    <option value="1">first option</option>
   </select>
   <br>
   </form>
  </div>
  <div id="step_2" class="step" style="display:none;">
   <form id="form_2" >
   This is the second step
   <br>
   <input type="text" name="testname2" id="testname2" value="" data-validation-engine="validate[required]">
   <br>
    <br>
   </form>
  </div>
  <button class="next">Next &raquo;</button>   
</div>
<script type="text/javascript">
$(function() {
	$('#testdiv').on("click", ".next", function(event) {
		var current = $('div.step:visible');
		var next = current.next();
		var formele = current.find('form:first')
		formele.validationEngine({
		  prettySelect: true, 
		  autoPositionUpdate: true, 
		  addSuccessCssClassToField: 'ui-state-valid',
		  addFailureCssClassToField: "ui-state-error",
		  onValidationComplete: function(form, status){ 
		        if (status == true) {
				current.hide();
			    next.show(); 
                }else { }
		  }}
		);
	});
 }
);
</script>

Open in new window


It is still not validating onclick but if i write something in the textfield or select nothing with my select it is validating only after i have click the button.
I don t know if you want to post the scripts too to test it yourself or if i can upload it anywhere else.
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41855550
No I have the scripts  I will take a look. Not familiar with this particular validation engine so will need to do some reading to see what its moving parts do.
0
 
LVL 2

Author Comment

by:Panos
ID: 41855565
Hi thank you for your help.
In case you post any solution I will be  able to check this tomorrow afternoon.
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41855893
Ok this should work.

<script type="text/javascript">
$(function() {
  // First bind to the validationEngine
  // add any custom properties you want here
  $('form').validationEngine();

  $('#testdiv').on("click", ".next", function(event) {
    var current = $('div.step:visible');
    var next = current.next();
    // Find the active form
    var formele = current.find('form:first');

    // Call the validate action on it
    if ( formele.validationEngine('validate') ) {

      // Move to the next form
      current.hide();
      next.show(); 
    }
  });
});
</script>

Open in new window

Working sample here
0
 
LVL 2

Author Comment

by:Panos
ID: 41855955
Hi Julian Hansen
Thank you very much for the solution. It is working now.
It would be also helpful if you could check how i can code (include) the options :
prettySelect: true,
autoPositionUpdate: true,
addSuccessCssClassToField: 'ui-state-valid',
addFailureCssClassToField: "ui-state-error"
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41856086
It should be as simple as adding them to the instantiation of the ValidationEngine
<script type="text/javascript">
$(function() {
// ADD THEM HERE AS AN OBJET
  $('form').validationEngine({
    prettySelect: true,
    xautoPositionUpdate: true,
    addSuccessCssClassToField: 'ui-state-valid',
    addFailureCssClassToField: "ui-state-error"   
  });
  $('#testdiv').on("click", ".next", function(event) {
    var current = $('div.step:visible');
    var next = current.next();
    //var formele = $(this).closest('form');
    var formele = current.find('form:first');
    if ( formele.validationEngine('validate') ) {
      current.hide();
      next.show(); 
    }
  });
});
</script>

Open in new window

0
 
LVL 2

Author Comment

by:Panos
ID: 41856121
Thank you very very much.
It was a great help.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41856141
You are welcome.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

743 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

16 Experts available now in Live!

Get 1:1 Help Now