Jquery validation position

Question

I am trying to use jquery validation. Following an example: http://docs.jquery.com/Plugins/Validation works great, and I would like to reproduce it using my code. However, I am not sure where to call him.

I have a html table generated, and when you click the "Edit" button for any row, it opens a form. I want to validate this form using jquery. I believe that it works, but when I click submit on the form, I hide the form, so I never see the validation work ... I think.

I generate the form using 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 script: http://jsfiddle.net/UtNaa/36/ . However, I cannot get the script to work when you click the "Edit" button. Which opens the form where I want to check.

I'm not sure if validation really works. Perhaps only when you click the submit button on the form, the form is hidden. Again the violin does not work to show the form, but it works for me on my site. Hope the code at least helps.

Answer 1

basically you need to add confirmation for each element either by calling it by adding

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

then add all your elements first before applying validation

or adding a rule

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

in this example, input with max. 50 char and min 10

you can also add custom validation with 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 }, }; 

when the form is submitted, when you click the submit button, but don’t put a hidden place in it, just insert the validator 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 will happen after the rules

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

l

Answer 2

The problem is that the form does not know which form fields should contain.

Paperwork again and examples. Apparently, you can use cool names and custom attributes to customize the validator. Alternatively, you can use the $ .ru () function to add rules to the form.

For example, make the camera field name mandatory by adding a "required" class to the input name.

 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 change 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 should change the Framework on the left side of jsFiddle to "no wrap (head)" and your JavaScript will start working. Here is the modified fiddle. http://jsfiddle.net/UtNaa/39/

However, your code does not work because there are no elements in the HTML code. Perhaps after adding other parts of the code, it may start working if it is not easier to debug.

Answer 4

Did not check part of the check, as it has already been answered. But you can really use tiny cleanup in your code, which I consider.

Check out this rewritten approach: http://jsfiddle.net/UtNaa/40/

---

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