Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

jQuery-Validation-Engine button onclick problem

Posted on 2016-10-22
13
53 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 55

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 55

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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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 55

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
 
LVL 55

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 55

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 55

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 55

Expert Comment

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

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
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…

829 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