Convalida Jquery, il gestore di invio non funziona

Question

Sto tentando di eseguire alcuni controlli aggiuntivi e la formattazione su determinati campi del mio modulo prima che venga inviato. Quindi ho usato il plugin di validazione di jquery di bassistanza. Funziona bene poiché visualizza correttamente tutti i messaggi di errore manadatory, tuttavia, non appena fornisco i valori necessari, il modulo viene semplicemente inviato. A questo punto non sono nemmeno sicuro se submitHandler sia stato attivato. Qualche idea?

modulo 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; 
     } 
    }); 
})​ 

Answer 1

Il codice sta fallendo perché si sta utilizzando una regola di convalida che non esiste.

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

Ma non c'è validatore di nome float in questo plugin. Rimuovilo e funzionerà correttamente. Puoi creare un validatore float personalizzato, se lo desideri.

Working Fiddle

Lista di controllo delle regole disponibili qui http://docs.jquery.com/Plugins/Validation#Validator

Come ho trovato questo?

ho controllato la console e abbiamo trovato questo errore viene gettato

Uncaught TypeError: Cannot call method 'call' of undefined 

Dalla seguente riga all'interno del file sorgente plug

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

significato $.validator.methods[method] è indefinito che dimostra che si sta utilizzando un validatore che non esiste.

Quindi ho controllato l'elenco dei metodi di convalida disponibili e your rules e ho trovato che stai usando la regola float che non è disponibile.

Quindi JS lancia questo errore e interrompe l'esecuzione, quindi il tuo submit handler non viene chiamato e viene inviato il modulo (che è il comportamento predefinito a meno che non lo impedisci utilizzando JS).

Answer 2

IE è particolarmente esigente con le virgole in più ... rimuoverli per un inizio:

$(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; 
     } 
    }); 
})​