[jQuery] Re: trigger validation by input:button
I have tried unsuccessfully to implement this solution, but I keep
getting the error:
validator is not defined
if (validator.element(#btnNext1)) {
Here is my code:
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
script type=text/javascript src=/scripts/jquery/
jquery-1.3.2.min.js/script
script type=text/javascript src=/scripts/jquery/jquery-validate/
jquery.validate.min.js/script
script type=text/javascript
$(document).ready(function(){
$.validator.addMethod(step, function(value, element, param) {
var isValid = true;
var elements = $(param).find(:input)
.not('input[type=hidden]')
.not(:submit, :reset, :image, :button, [disabled]);
alert(elements.length);
for (var i = 0; i elements.length; i++) {
if (!this.element(elements[i])){
isValid = false;
}
} return isValid;
}, );
$(#testForm).validate();
$(#btnNext1).click(function() {
if (validator.element(#btnNext1)) {
$(#step_1).hide();
$(#step_2).show();
}
});
});
/script
titleUntitled Document/title
/head
body
form id=testForm
div id=step_1
div id=step1control
input name=name type=text class=required /
/div
button id=btnNext1 value=Next class={step:'#step1control'}
nextbuttonNext/button
/div
div id=step_2
pStep 2/p
/div
/form
/body
On Jun 24, 12:56�am, Mac amcint...@bigmate.com.au wrote:
Hi Matt
I came across the same issue when I tried to create a wizard. I
overcame this by doing the following:
Write a validator extension that looks something like this and use the
add method to add it:
$.validator.addMethod(step, function(value, element, param) {
� � var isValid = true;
� � var elements = $(param).find(:input)
� � .not('input[type=hidden]')
� � .not(:submit, :reset, :image, :button, [disabled]);
� � for (var i = 0; i elements.length; i++) {
� � � � if (!this.element(elements[i])){
� � � � � � isValid = false;
� � � � }
� � } return isValid;
}, );
Attach this method to the button itself and pass it the elementid as
param like so:
button id=btnNext1 value=Next class={step:'#step1control'}
nextbuttonNext/button
The step1control can be a div containing all the elements that you
want to validate.
Then you need to run some code in the click event of the button to
check the button( and thus the step) is valid. eg:
$(#btnNext1).click(function() {
� � � � � � if (validator.element(#btnNext1)) {
� � � � � � � � $(#step_1).hide();
� � � � � � � � $(#step_2).show();
� � � � � � }
� � � � });
I have created wizards like this with the validator plugin multiple
times and seems to work okay!!Hope it helps!!
On Jun 12, 3:58�pm, Matt sean...@gmail.com wrote:
Hi,
I have been working on a big form and using jquery plug-in (wizard
form) to divide tit into small subforms. Now, I am trying to integrate
the Validation plugin to deal with the validation and come up with an
issue.
I run validation on subforms which contains two buttons(back, next).
Those 2 buttons are input:button type but not input:submit. I realise
the Validation plug-in would trigger the validation on submit event.
Is there any way I can modify the code so that it could handle my
requirement?
Having a look on the multipart demo which is the exact scenario I am
dealing with. However, the page below is not working. I tried on both
IE and FF.
http://jquery.bassistance.de/validate/demo/multipart/
Please advise.
Cheers,
Matt
[jQuery] Re: trigger validation by input:button
So I got the error to go away by using:
var validator = $(#testForm).validate();
But now the problem is that the button proceeds to the next step, even
if there are errors. I can't get it to not display #step_2 when there
are errors. It was suggested that I try using class={required:true}
on the input instead of class=required, but that didn't work. I
don't fully understand what the added method is doing, but it seems to
me like it's not being called or something. The statement if
(validator.element(#btnNext1)) always comes out true, even when I
tried explicitly setting var isValid = false; in the method. I've
uploaded a test page: http://www.angelo.edu/webservices/validateTest.html.
Any help would be greatly appreciated.
On Jul 6, 3:14 pm, Jon jon.wil...@angelo.edu wrote:
I have tried unsuccessfully to implement this solution, but I keep
getting the error:
validator is not defined
if (validator.element(#btnNext1)) {
Here is my code:
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
script type=text/javascript src=/scripts/jquery/
jquery-1.3.2.min.js/script
script type=text/javascript src=/scripts/jquery/jquery-validate/
jquery.validate.min.js/script
script type=text/javascript
$(document).ready(function(){
$.validator.addMethod(step, function(value, element, param) {
var isValid = true;
var elements = $(param).find(:input)
.not('input[type=hidden]')
.not(:submit, :reset, :image, :button, [disabled]);
alert(elements.length);
for (var i = 0; i elements.length; i++) {
if (!this.element(elements[i])){
isValid = false;
}
} return isValid;
}, );
$(#testForm).validate();
$(#btnNext1).click(function() {
if (validator.element(#btnNext1)) {
$(#step_1).hide();
$(#step_2).show();
}
});
});
/script
titleUntitled Document/title
/head
body
form id=testForm
div id=step_1
div id=step1control
input name=name type=text class=required /
/div
buttonid=btnNext1 value=Next
class={step:'#step1control'}
nextbuttonNext/button
/div
div id=step_2
pStep 2/p
/div
/form
/body
On Jun 24, 12:56 am, Mac amcint...@bigmate.com.au wrote:
Hi Matt
I came across the same issue when I tried to create a wizard. I
overcame this by doing the following:
Write a validator extension that looks something like this and use the
add method to add it:
$.validator.addMethod(step, function(value, element, param) {
var isValid = true;
var elements = $(param).find(:input)
.not('input[type=hidden]')
.not(:submit, :reset, :image, :button, [disabled]);
for (var i = 0; i elements.length; i++) {
if (!this.element(elements[i])){
isValid = false;
}
} return isValid;
}, );
Attach this method to thebuttonitself and pass it the elementid as
param like so:
buttonid=btnNext1 value=Next class={step:'#step1control'}
nextbuttonNext/button
The step1control can be a div containing all the elements that you
want tovalidate.
Then you need to run some code in the click event of thebuttonto
check thebutton( and thus the step) is valid. eg:
$(#btnNext1).click(function() {
if (validator.element(#btnNext1)) {
$(#step_1).hide();
$(#step_2).show();
}
});
I have created wizards like this with the validator plugin multiple
times and seems to work okay!!Hope it helps!!
On Jun 12, 3:58 pm, Matt sean...@gmail.com wrote:
Hi,
I have been working on a big form and using jquery plug-in (wizard
form) to divide tit into small subforms. Now, I am trying to integrate
the Validation plugin to deal with the validation and come up with an
issue.
I run validation on subforms which contains two buttons(back, next).
Those 2 buttons are input:buttontype but not input:submit. I realise
the Validation plug-in would trigger the validation on submit event.
Is there any way I can modify the code so that it could handle my
requirement?
Having a look on the multipart demo which is the exact scenario I am
dealing with. However, the page below is not working. I tried on both
IE and FF.
http://jquery.bassistance.de/validate/demo/multipart/
Please advise.
Cheers,
Matt
[jQuery] Re: trigger validation by input:button
It sounds like the validation is not attached to the click of the next button.
If you stick a breakpoint in the step method - does it hit the breakpoint?
Also - there is no space between button and id (buttonid=btnNext1
value=Next class={step:'#step1control'}
nextbuttonNext/button) in the html markup. This could cause jQuery to not
find the element with that id then not run the method. (could also just be
an error in pasting it into the email??)
Let me know!!
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf
Of Jon
Sent: Tuesday, 7 July 2009 2:58 PM
To: jQuery (English)
Cc: Alletha McIntyre
Subject: [jQuery] Re: trigger validation by input:button
So I got the error to go away by using:
var validator = $(#testForm).validate();
But now the problem is that the button proceeds to the next step, even
if there are errors. I can't get it to not display #step_2 when there
are errors. It was suggested that I try using class={required:true}
on the input instead of class=required, but that didn't work. I
don't fully understand what the added method is doing, but it seems to
me like it's not being called or something. The statement if
(validator.element(#btnNext1)) always comes out true, even when I
tried explicitly setting var isValid = false; in the method. I've
uploaded a test page: http://www.angelo.edu/webservices/validateTest.html.
Any help would be greatly appreciated.
On Jul 6, 3:14 pm, Jon jon.wil...@angelo.edu wrote:
I have tried unsuccessfully to implement this solution, but I keep
getting the error:
validator is not defined
if (validator.element(#btnNext1)) {
Here is my code:
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
script type=text/javascript src=/scripts/jquery/
jquery-1.3.2.min.js/script
script type=text/javascript src=/scripts/jquery/jquery-validate/
jquery.validate.min.js/script
script type=text/javascript
$(document).ready(function(){
$.validator.addMethod(step, function(value, element, param) {
var isValid = true;
var elements = $(param).find(:input)
.not('input[type=hidden]')
.not(:submit, :reset, :image, :button, [disabled]);
alert(elements.length);
for (var i = 0; i elements.length; i++) {
if (!this.element(elements[i])){
isValid = false;
}
} return isValid;
}, );
$(#testForm).validate();
$(#btnNext1).click(function() {
if (validator.element(#btnNext1)) {
$(#step_1).hide();
$(#step_2).show();
}
});
});
/script
titleUntitled Document/title
/head
body
form id=testForm
div id=step_1
div id=step1control
input name=name type=text class=required /
/div
buttonid=btnNext1 value=Next
class={step:'#step1control'}
nextbuttonNext/button
/div
div id=step_2
pStep 2/p
/div
/form
/body
On Jun 24, 12:56 am, Mac amcint...@bigmate.com.au wrote:
Hi Matt
I came across the same issue when I tried to create a wizard. I
overcame this by doing the following:
Write a validator extension that looks something like this and use the
add method to add it:
$.validator.addMethod(step, function(value, element, param) {
var isValid = true;
var elements = $(param).find(:input)
.not('input[type=hidden]')
.not(:submit, :reset, :image, :button, [disabled]);
for (var i = 0; i elements.length; i++) {
if (!this.element(elements[i])){
isValid = false;
}
} return isValid;
}, );
Attach this method to thebuttonitself and pass it the elementid as
param like so:
buttonid=btnNext1 value=Next class={step:'#step1control'}
nextbuttonNext/button
The step1control can be a div containing all the elements that you
want tovalidate.
Then you need to run some code in the click event of thebuttonto
check thebutton( and thus the step) is valid. eg:
$(#btnNext1).click(function() {
if (validator.element(#btnNext1)) {
$(#step_1).hide();
$(#step_2).show();
}
});
I have created wizards like this with the validator plugin multiple
times and seems to work okay!!Hope it helps!!
On Jun 12, 3:58 pm, Matt sean...@gmail.com wrote:
Hi,
I have been working on a big form and using jquery plug-in (wizard
form) to divide tit into small subforms. Now, I am trying to integrate
the Validation plugin to deal with the validation and come up with an
issue.
I run validation on subforms which contains two buttons(back, next).
Those 2 buttons are input:buttontype but not input:submit
[jQuery] Re: trigger validation by input:button
There definitely is a space between button and id. That must have just
been a side effect of the email.
Unfortunately, like I said, javascript is not my strength. I don't
even know what a breakpoint is. I starting to think I'm just in over
my head.
On Jul 7, 12:03 am, Alletha McIntyre amcint...@bigmate.com.au wrote:
It sounds like the validation is not attached to the click of the next button.
If you stick a breakpoint in the step method - does it hit the breakpoint?
Also - there is no space between button and id (buttonid=btnNext1
value=Next class={step:'#step1control'}
nextbuttonNext/button) in the html markup. This could cause jQuery to
not find the element with that id then not run the method. (could also
just be an error in pasting it into the email??)
Let me know!!
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Jon
Sent: Tuesday, 7 July 2009 2:58 PM
To: jQuery (English)
Cc: Alletha McIntyre
Subject: [jQuery] Re: trigger validation by input:button
So I got the error to go away by using:
var validator = $(#testForm).validate();
But now the problem is that the button proceeds to the next step, even
if there are errors. I can't get it to not display #step_2 when there
are errors. It was suggested that I try using class={required:true}
on the input instead of class=required, but that didn't work. I
don't fully understand what the added method is doing, but it seems to
me like it's not being called or something. The statement if
(validator.element(#btnNext1)) always comes out true, even when I
tried explicitly setting var isValid = false; in the method. I've
uploaded a test page:http://www.angelo.edu/webservices/validateTest.html.
Any help would be greatly appreciated.
On Jul 6, 3:14 pm, Jon jon.wil...@angelo.edu wrote:
I have tried unsuccessfully to implement this solution, but I keep
getting the error:
validator is not defined
if (validator.element(#btnNext1)) {
Here is my code:
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
script type=text/javascript src=/scripts/jquery/
jquery-1.3.2.min.js/script
script type=text/javascript src=/scripts/jquery/jquery-validate/
jquery.validate.min.js/script
script type=text/javascript
$(document).ready(function(){
$.validator.addMethod(step, function(value, element, param) {
var isValid = true;
var elements = $(param).find(:input)
.not('input[type=hidden]')
.not(:submit, :reset, :image, :button, [disabled]);
alert(elements.length);
for (var i = 0; i elements.length; i++) {
if (!this.element(elements[i])){
isValid = false;
}
} return isValid;
}, );
$(#testForm).validate();
$(#btnNext1).click(function() {
if (validator.element(#btnNext1)) {
$(#step_1).hide();
$(#step_2).show();
}
});
});
/script
titleUntitled Document/title
/head
body
form id=testForm
div id=step_1
div id=step1control
input name=name type=text class=required /
/div
buttonid=btnNext1 value=Next
class={step:'#step1control'}
nextbuttonNext/button
/div
div id=step_2
pStep 2/p
/div
/form
/body
On Jun 24, 12:56 am, Mac amcint...@bigmate.com.au wrote:
Hi Matt
I came across the same issue when I tried to create a wizard. I
overcame this by doing the following:
Write a validator extension that looks something like this and use the
add method to add it:
$.validator.addMethod(step, function(value, element, param) {
var isValid = true;
var elements = $(param).find(:input)
.not('input[type=hidden]')
.not(:submit, :reset, :image, :button, [disabled]);
for (var i = 0; i elements.length; i++) {
if (!this.element(elements[i])){
isValid = false;
}
} return isValid;
}, );
Attach this method to thebuttonitself and pass it the elementid as
param like so:
buttonid=btnNext1 value=Next class={step:'#step1control'}
nextbuttonNext/button
The step1control can be a div containing all the elements that you
want tovalidate.
Then you need to run some code in the click event of thebuttonto
check thebutton( and thus the step) is valid. eg:
$(#btnNext1).click(function() {
if (validator.element(#btnNext1)) {
$(#step_1).hide();
$(#step_2).show();
}
});
I have created wizards like this with the validator plugin multiple
times and seems to work okay!!Hope
[jQuery] Re: trigger validation by input:button
By the way. Do you have any examples of where you've implemented this
sort of thing? I'd like to see it in action somewhere. I learn well by
studying working examples.
On Jul 7, 12:03 am, Alletha McIntyre amcint...@bigmate.com.au wrote:
It sounds like the validation is not attached to the click of the next button.
If you stick a breakpoint in the step method - does it hit the breakpoint?
Also - there is no space between button and id (buttonid=btnNext1
value=Next class={step:'#step1control'}
nextbuttonNext/button) in the html markup. This could cause jQuery to
not find the element with that id then not run the method. (could also
just be an error in pasting it into the email??)
Let me know!!
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Jon
Sent: Tuesday, 7 July 2009 2:58 PM
To: jQuery (English)
Cc: Alletha McIntyre
Subject: [jQuery] Re: trigger validation by input:button
So I got the error to go away by using:
var validator = $(#testForm).validate();
But now the problem is that the button proceeds to the next step, even
if there are errors. I can't get it to not display #step_2 when there
are errors. It was suggested that I try using class={required:true}
on the input instead of class=required, but that didn't work. I
don't fully understand what the added method is doing, but it seems to
me like it's not being called or something. The statement if
(validator.element(#btnNext1)) always comes out true, even when I
tried explicitly setting var isValid = false; in the method. I've
uploaded a test page:http://www.angelo.edu/webservices/validateTest.html.
Any help would be greatly appreciated.
On Jul 6, 3:14 pm, Jon jon.wil...@angelo.edu wrote:
I have tried unsuccessfully to implement this solution, but I keep
getting the error:
validator is not defined
if (validator.element(#btnNext1)) {
Here is my code:
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
script type=text/javascript src=/scripts/jquery/
jquery-1.3.2.min.js/script
script type=text/javascript src=/scripts/jquery/jquery-validate/
jquery.validate.min.js/script
script type=text/javascript
$(document).ready(function(){
$.validator.addMethod(step, function(value, element, param) {
var isValid = true;
var elements = $(param).find(:input)
.not('input[type=hidden]')
.not(:submit, :reset, :image, :button, [disabled]);
alert(elements.length);
for (var i = 0; i elements.length; i++) {
if (!this.element(elements[i])){
isValid = false;
}
} return isValid;
}, );
$(#testForm).validate();
$(#btnNext1).click(function() {
if (validator.element(#btnNext1)) {
$(#step_1).hide();
$(#step_2).show();
}
});
});
/script
titleUntitled Document/title
/head
body
form id=testForm
div id=step_1
div id=step1control
input name=name type=text class=required /
/div
buttonid=btnNext1 value=Next
class={step:'#step1control'}
nextbuttonNext/button
/div
div id=step_2
pStep 2/p
/div
/form
/body
On Jun 24, 12:56 am, Mac amcint...@bigmate.com.au wrote:
Hi Matt
I came across the same issue when I tried to create a wizard. I
overcame this by doing the following:
Write a validator extension that looks something like this and use the
add method to add it:
$.validator.addMethod(step, function(value, element, param) {
var isValid = true;
var elements = $(param).find(:input)
.not('input[type=hidden]')
.not(:submit, :reset, :image, :button, [disabled]);
for (var i = 0; i elements.length; i++) {
if (!this.element(elements[i])){
isValid = false;
}
} return isValid;
}, );
Attach this method to thebuttonitself and pass it the elementid as
param like so:
buttonid=btnNext1 value=Next class={step:'#step1control'}
nextbuttonNext/button
The step1control can be a div containing all the elements that you
want tovalidate.
Then you need to run some code in the click event of thebuttonto
check thebutton( and thus the step) is valid. eg:
$(#btnNext1).click(function() {
if (validator.element(#btnNext1)) {
$(#step_1).hide();
$(#step_2).show();
}
});
I have created wizards like this with the validator plugin multiple
times and seems to work okay!!Hope it helps!!
On Jun 12, 3:58 pm, Matt sean...@gmail.com wrote:
Hi,
I
[jQuery] Re: trigger validation by input:button
I am new to Jquery and Validate and have similar issue, as anyone got a solution? On Jun 12, 7:58 am, Matt sean...@gmail.com wrote: Hi, I have been working on a big form and using jquery plug-in (wizard form) to divide tit into small subforms. Now, I am trying to integrate the Validation plugin to deal with the validation and come up with an issue. I run validation on subforms which contains two buttons(back, next). Those 2 buttons are input:button type but not input:submit. I realise the Validation plug-in would trigger the validation on submit event. Is there any way I can modify the code so that it could handle my requirement? Having a look on the multipart demo which is the exact scenario I am dealing with. However, the page below is not working. I tried on both IE and FF. http://jquery.bassistance.de/validate/demo/multipart/ Please advise. Cheers, Matt
[jQuery] Re: trigger validation by input:button
As long as the buttons do not have any submit events binded you should be fine. I'm not used either plugin though. Pascal wrote: I am new to Jquery and Validate and have similar issue, as anyone got a solution? On Jun 12, 7:58 am, Matt sean...@gmail.com wrote: Hi, I have been working on a big form and using jquery plug-in (wizard form) to divide tit into small subforms. Now, I am trying to integrate the Validation plugin to deal with the validation and come up with an issue. I run validation on subforms which contains two buttons(back, next). Those 2 buttons are input:button type but not input:submit. I realise the Validation plug-in would trigger the validation on submit event. Is there any way I can modify the code so that it could handle my requirement? Having a look on the multipart demo which is the exact scenario I am dealing with. However, the page below is not working. I tried on both IE and FF. http://jquery.bassistance.de/validate/demo/multipart/ Please advise. Cheers, Matt
[jQuery] Re: trigger validation by input:button
Hi Matt
I came across the same issue when I tried to create a wizard. I
overcame this by doing the following:
Write a validator extension that looks something like this and use the
add method to add it:
$.validator.addMethod(step, function(value, element, param) {
var isValid = true;
var elements = $(param).find(:input)
.not('input[type=hidden]')
.not(:submit, :reset, :image, :button, [disabled]);
for (var i = 0; i elements.length; i++) {
if (!this.element(elements[i])){
isValid = false;
}
} return isValid;
}, );
Attach this method to the button itself and pass it the elementid as
param like so:
button id=btnNext1 value=Next class={step:'#step1control'}
nextbuttonNext/button
The step1control can be a div containing all the elements that you
want to validate.
Then you need to run some code in the click event of the button to
check the button( and thus the step) is valid. eg:
$(#btnNext1).click(function() {
if (validator.element(#btnNext1)) {
$(#step_1).hide();
$(#step_2).show();
}
});
I have created wizards like this with the validator plugin multiple
times and seems to work okay!!Hope it helps!!
On Jun 12, 3:58 pm, Matt sean...@gmail.com wrote:
Hi,
I have been working on a big form and using jquery plug-in (wizard
form) to divide tit into small subforms. Now, I am trying to integrate
the Validation plugin to deal with the validation and come up with an
issue.
I run validation on subforms which contains two buttons(back, next).
Those 2 buttons are input:button type but not input:submit. I realise
the Validation plug-in would trigger the validation on submit event.
Is there any way I can modify the code so that it could handle my
requirement?
Having a look on the multipart demo which is the exact scenario I am
dealing with. However, the page below is not working. I tried on both
IE and FF.
http://jquery.bassistance.de/validate/demo/multipart/
Please advise.
Cheers,
Matt
