2012-06-22 20 views
6

私はフォームを提出する前に、フォームの特定のフィールドでいくつかの追加チェックと書式設定を試みています。したがって、私はbassistance jqueryバリデーションプラグインを使用しました。それは正常にすべてのmanadatoryエラーメッセージを表示するようにうまく動作しますが、私は必要な値を入力するとすぐに、フォームは単に送信します。この時点では、たとえsubmitHandlerがトリガーされていたとしても、私は確信していません。何か案は?Jqueryの検証、submithandlerが機能しません

フォームの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

javascriptコンソールはフォーム送信時にエラーを報告しますか? – fcalderan

+0

あなたは余分なカンマを持っています。これはIEで問題を引き起こします – ManseUK

+0

私は火かき棒を使用していますが、それはしません。 – user734081

答えて

8

あなたのコードが失敗しています存在しない。

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

しかし、そのプラグインにはfloatというバリデータはありません。それを削除し、それは正常に動作します。必要に応じて、カスタムfloatバリデータを作成することができます。ここで使用可能なルールの

Working Fiddle

チェックリストhttp://docs.jquery.com/Plugins/Validation#Validator

どのように私はこれを見つけましたか?

私はコンソールをチェックし$.validator.methods[method]は、あなたがそのバリ​​データを使用していることを証明した未定義である意味、このエラーは、プラグインのソースファイル内の次の行から

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

Uncaught TypeError: Cannot call method 'call' of undefined 

をスローされました存在しない。

したがって、利用可能な検証方法リストとyour rulesを確認したところ、ご利用いただけるfloatルールは使用できませんでした。

JSはこのエラーをスローして実行を停止していますので、submit handlerは呼び出されず、フォームが送信されています(JSを使用しないとデフォルトの動作になります)。

+0

ありがとう – user734081

2

IEはスタートのためにそれらを削除...余分なカンマで特にうるさいです:あなたはその検証ルールを使用しているため

$(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おそらくカンマがエラーになるでしょう...何度もこの問題に直面しました – coolguy

+0

私はすでに削除して同じ問題を試しました – user734081

+0

@ user734081質問に 'form' htmlを含めることはできますか?それは間違いなく 'commentForm'のIDを持っていますか? – ManseUK

関連する問題