jquery validate position

Question

Estoy tratando de usar jquery validate. Siguiendo el ejemplo: http://docs.jquery.com/Plugins/Validation funciona muy bien y me gustaría reproducir con mi código. Sin embargo, no estoy seguro de cómo llamarlo.

Lo que tengo es una tabla html generada y cuando haces clic en el botón "Editar" para cualquier fila, se abre un formulario. Quiero validar este formulario con jquery. Creo que está funcionando, pero cuando pulso "enviar en el formulario", oculto el formulario para que nunca vea el trabajo de validación ... creo.

que generar el formulario con javascript y el botón de enviar se parece a esto:

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); 

Esto es apenas suficiente información así que tengo todo el código en este violín: http://jsfiddle.net/UtNaa/36/. Sin embargo, parece que no puedo hacer que el violín funcione cuando haces clic en el botón Editar. Lo cual abre un formulario donde quiero la validación.

No estoy seguro de que la validación realmente funcione. Tal vez lo sea, pero cuando presiona el botón de enviar en el formulario, el formulario se esconde. De nuevo, el violín no funciona para mostrar el formulario, pero funciona para mí en mi sitio. Esperemos que el código allí al menos ayude.

Answer 1

básicamente tiene que agregar la validación en cada elemento, ya sea por llamarlo añadiendo

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

continuación, anexar todos los elementos de su primera ANTES de aplicar valide

o agregue una regla

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

en este ejemplo se requeriría de entrada con un máximo de 50 Char y mínima de 10

también se puede añadir una validación personalizada mediante el uso de addMethod antes de que pueda validar

$.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 
      }, 
}; 

entonces cuando el formulario se enviará cuando pulses el botón de enviar, pero no pongas el código allí solo ingresa en el controlador de envío de validadores

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 
    } 
}; 

Aquí hay un ejemplo de cómo aplicar los mensajes personalizados, esto iría después de reglas

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

l

Answer 2

El problema es que el formulario no sabe lo que se supone que contienen los campos del formulario.

Revise los documentos nuevamente y los ejemplos. Aparentemente puede usar nombres de clase y atributos personalizados para configurar el validador. Alternativamente, usted puede usar la función $ .rule() para agregar las reglas al formulario.

Por ejemplo, establezca el nombre del campo de la cámara requerido agregando una clase 'requerida' a la entrada del nombre.

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

también, modificar el botón manejador presentar onClick

//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

Tienes que cambiar el marco en el lado izquierdo de la jsFiddle a "sin envoltura (cabeza) "y tu JavaScript comenzará a funcionar. Aquí está el violín cambiado. http://jsfiddle.net/UtNaa/39/

Sin embargo, su código no funciona ya que le faltan elementos en el código HTML. Probablemente, después de agregar las otras partes del código, podría comenzar a funcionar, de lo contrario, será más fácil depurarlo.

Answer 4

No he comprobado la parte de validación ya que esta ya está respondida. Pero realmente puedes usar una pequeña limpieza en tu código, creo.

Pedido reescrito este enfoque: http://jsfiddle.net/UtNaa/40/

---

de error con eventos de botón: http://jsfiddle.net/UtNaa/42/