Question

I’m trying to use jquery validate. Following the example: http://docs.jquery.com/Plugins/Validation works great and I’d like to reproduce with my code. However I’m not sure where to call it.

What I have is a generated html table and when you click the “Edit” button for any row it opens up a form. I want to validate this form with jquery. I believe it is working but when I hit submit on the form I hide the form so I can never see the validation work…I think.

I generate the form with javascript and the submit button looks like this:

var mysubmit = document.createElement("input");
mysubmit.type = "submit";
mysubmit.name = "Submit";
mysubmit.value = "Apply"
mysubmit.onclick = function() { 
   //return formSubmitactivecameras();
js("#EditCameraForm").validate();
    this.form.submit();
};
myform.appendChild(mysubmit);

This is hardly enough information so I have all the code in this fiddle: http://jsfiddle.net/UtNaa/36/. However I can’t seem to get the fiddle to work when you click the Edit button. Which opens up a form where I want the validation.

I’m not sure validation is actually working. Maybe it is but when you hit the submit button on the form, the form hides. Again the fiddle doesn’t work to show the form but it does work for me on my site. Hopefully the code in there will at least help.

Answer 1

basically you need to add validation on each element either by call it by adding

 myinput.className = "required"; // add this line

then append all your elements first BEFORE you apply validate

or by adding a rule

js("#EditCameraForm").validate();
        rules: {
            camera_name: {
                required: true,
                minlength: 50,
                maxlength: 10
            },
};

in this example it would require input with max of 50 char and min of 10

you could also add custom validation by using addMethod BEFORE you can validate

$.validator.addMethod("alphanum", function(value, element) {
    return this.optional(element) || /^[a-z0-9]+$/i.test(value);
}, "This field must contain only letters and numbers.");

js("#EditCameraForm").validate();
        rules: {
            camera_name: {
                required: true,
                alphanum: true,
                minlength: 50,
                maxlength: 10
            },
};

then when the form will submit when you hit the submit button but don’t put the hide in there just put in in the validators’submit handler

js("#EditCameraForm").validate();
    rules: {
        camera_name: {
            required: true,
            minlength: 50,
            maxlength: 10
        }
    },
    submitHandler: function() {
        // do stuff once form is valid but before it is sent
    }
};

Here is an example of how to apply custom messages, this would go in after rules

messages: {
    email: {
        required: 'Enter this!'
    }
}

l