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'}
> nextbutton">Next</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>
> <title>Untitled 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'}
> nextbutton">Next</button>
> </div>
> <div id="step_2">
> <p>Step 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'}
> > nextbutton">Next</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
This email message and any attachments are confidential. If you are not the
intended recipient, any use, interference with, disclosure or copying of this
material is unauthorised and prohibited. If you have received this email in
error, please immediately advise the sender by return email and delete the
message from your system. If you have any doubts about the authenticity of this
message and any attachments, please contact BIGmate Monitoring Services Pty Ltd
immediately.
