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
