jquery validate position

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

Answer 2

The problem is that the form doesn't know what the form fields are supposed to contain.

Checkout the docs again, and the examples. Apparently you can use classnames and custom attributes to configure the validator. Alternatively you you can $.rule() function to add the rules to the form.

For example, make the Camera Field name required by adding a 'required' class to the name input.

var myinput = document.createElement("input");
myinput.name="camera_name";
myinput.value=cameraname;
myinput.id="CameraName";
myinput.className = "required"; // add this line
myform.appendChild(myinput);

Also, modify the submit button onClick handler

//submit changes button
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(); // This isn't needed, the form will be submitted when this function ends
};
myform.appendChild(mysubmit);

Answer 3

You have to change the Framework on the left hand side of the jsFiddle to "no wrap(head)" and your JavaScript will start working. Here is the changed fiddle. http://jsfiddle.net/UtNaa/39/

However, your code is not working as it is missing elements in HTML code. Probably after adding the other parts of the code it might start working, if not it will be easier to debug.

Answer 4

Haven't checked the validation part as this is answered already. But you can really use a tiny cleanup in your code I believe.

Checkout this rewritten approach: http://jsfiddle.net/UtNaa/40/

---

Fixed bug with button events: http://jsfiddle.net/UtNaa/42/