2012-06-22 20 views
6

Estoy tratando de hacer algunas comprobaciones adicionales y formatear en ciertos campos de mi formulario antes de enviarlo. Por lo tanto, utilicé el complemento de validación jquestry bassistance. Funciona bien, ya que muestra todos los mensajes de error de gestión correctamente, sin embargo, tan pronto como proporciono los valores necesarios, el formulario simplemente envía. En este punto, ni siquiera estoy seguro de si submitHandler está activado. ¿Algunas ideas?Validación de Jquery, el controlador de envío no funciona

formulario HTML: http://jsfiddle.net/7PAZU/

$(function() { 
    $("#commentForm").validate({ 
     rules: { 
      bill_first_name: { 
       required: true 
      }, 
      bill_last_name: { 
       required: true 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      Phone: { 
       required: true, 
       number: true 
      }, 

      bill_address_one: { 
       required: true 
      }, 
      bill_city: { 
       required: true 
      }, 
      bill_state_or_province: { 
       required: true 
      }, 
      charge_total: { 
       required: true, 
       float: true 
      }, 
     }, 
     messages: { 
      bill_first_name: { 
       required: "Please put in First Name" 
      }, 
      bill_last_name: { 
       required: "Please put in last Name" 
      }, 
      email: { 
       required: "Please enter a valid email" 
      }, 
      phone: { 
       required: "Please enter a valid Phone Number" 

      }, 

      bill_address_one: { 
       required: "Please put in Address" 
      }, 
      bill_city: { 
       required: "Please put in City" 
      }, 
      bill_state_or_province: { 
       required: "Please put in state" 
      }, 
      charge_total: { 
       required: "Please put Amount In Whole number such as 10.00", 
       number: "Please put in Amount In Whole number such as 10.00" 
      }, 
     }, 
     submitHandler: function(frm) { 
      $("#charge_total").val(parseFloat($("#charge_total").val()).toFixed(2)); 
      alert("Dukhche Na"); 
      return false; 
     } 
    }); 
})​ 
+0

¿su consola de JavaScript informa de algún error en el envío del formulario? – fcalderan

+0

Tiene comas extra para empezar, esto causará problemas en IE – ManseUK

+0

Uso firebug y no, no lo hace – user734081

Respuesta

8

Su código está fallando porque está utilizando una regla de validación que no existe.

charge_total: { 
       required: true, 
       float: true // there's no validator named `float` 
      } // Comma removed here 

Pero no hay validador float en ese plugin. Quítelo y funcionará bien. Puede crear un validador float personalizado si lo desea.

Working Fiddle

Comprobar lista de reglas disponibles aquí http://docs.jquery.com/Plugins/Validation#Validator

¿Cómo lo encuentro?

he comprobado la consola y encontramos este error de ser arrojado

Uncaught TypeError: Cannot call method 'call' of undefined 

de la siguiente línea dentro del archivo fuente del plugin

var result = $.validator.methods[method] 
     .call(this, element.value.replace(/\r/g, ""), element, rule.parameters); 

El significar $.validator.methods[method] no está definido lo que demuestra que está utilizando un validador que no existe.

Comprobé la lista de métodos de validación disponibles y your rules y encontré que está utilizando la regla float que no está disponible.

Así que JS está lanzando este error y deteniendo la ejecución, por lo que su submit handler no se está llamando y se está enviando el formulario (que es el comportamiento predeterminado a menos que lo impida usando JS).

+0

Gracias, está funcionando bien – user734081

2

IE es particularmente exigente con comas adicionales ... retiradas, por un principio:

$(function() { 
    $("#commentForm").validate({ 
     rules: { 
      bill_first_name: { 
       required: true 
      }, 
      bill_last_name: { 
       required: true 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      Phone: { 
       required: true, 
       number: true 
      }, 

      bill_address_one: { 
       required: true 
      }, 
      bill_city: { 
       required: true 
      }, 
      bill_state_or_province: { 
       required: true 
      }, 
      charge_total: { 
       required: true, 
       float: true 
      } // Comma removed here 
     }, 
     messages: { 
      bill_first_name: { 
       required: "Please put in First Name" 
      }, 
      bill_last_name: { 
       required: "Please put in last Name" 
      }, 
      email: { 
       required: "Please enter a valid email" 
      }, 
      phone: { 
       required: "Please enter a valid Phone Number" 

      }, 

      bill_address_one: { 
       required: "Please put in Address" 
      }, 
      bill_city: { 
       required: "Please put in City" 
      }, 
      bill_state_or_province: { 
       required: "Please put in state" 
      }, 
      charge_total: { 
       required: "Please put Amount In Whole number such as 10.00", 
       number: "Please put in Amount In Whole number such as 10.00" 
      } // Comma removed here 
     }, 
     submitHandler: function(frm) { 
      $("#charge_total").val(parseFloat($("#charge_total").val()).toFixed(2)); 
      alert("Dukhche Na"); 
      return false; 
     } 
    }); 
})​ 
+0

+1 Lo más probable es que la coma sea el error ... me enfrenté a este sitio varias veces – coolguy

+0

Ya he eliminado y probado aún el mismo problema – user734081

+0

@ user734081 ¿puede incluir el 'formulario' html en la pregunta? ¿Tiene definitivamente una identificación de 'commentForm'? – ManseUK

Cuestiones relacionadas