2013-05-20 11 views
5

jquery検証プラグインを使用して簡単なフォームで作業していましたが、何らかの理由で「phoneUS」ルールのように思われます検証コードの残りの部分を解読します。jQuery検証プラグイン、phoneUSフィールドがフォームを破棄しています

フィールド( "tel")がフォーム上で空白である限り、検証は意図した通りに機能します。しかし電話欄(文字を含む)に何かが入力された場合、他の必須フィールドが空白のままであっても妥当性検査はスキップされ、フォームが提出されます。ただし、 'phoneUS'ルールがコードから取り除かれた場合、 'tel'入力に適用される他の検証ルールが引き続き適用されます。言うまでもなく、私は完全に混乱しています。

スクリプトは次のとおりです。

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#survey1').validate({ 
    rules: { 
    firstname: { 
      required: true, 
      },  

    lastname: { 
      required: true 
      }, 

    address1: { 
      required: true 
      }, 

    city: { 
      required: true 
      },  

    state: { 
      required: true 
      }, 

    zip: { 
      required: true, 
      digits: true 
      }, 

    tel: { 
      required: true, 
      phoneUS: true 
      }, 

    email: { 
      email: true 
      } 

    } 



    }); 
}); 

</script> 

ラベルや入力フィールドは、スクリプトに一致する名前を持つ単純なテキストボックスです。フォームアクションは、PHPファイルを使用して結果を静的な電子メールアドレスに電子メールで送信するように設定されています。他の情報が参考になったら、私はそれを提供します。

私はjQueryに比較的新しいので、ポインタ(余分な文字など)を自由に提供してください。

ありがとうございます!

+0

ポインタのリクエストに関してはあなたではなく別のJavaScriptファイルが含まれていませたければ

あるいは、手動でちょうどphoneUSルール/メソッドを追加することができます。一見すると構文エラーは見えませんが、コードを適切にインデントして読みやすく、デバッグしやすいようにすることをお勧めします。 – Sparky

答えて

11

jQuery Validateには、phoneUS関数標準が付属していません。それを追加する必要があります。あなたはphoneUSルール/メソッドを含むadditional-methods.js fileを含める必要が

// Add US Phone Validation 
jQuery.validator.addMethod('phoneUS', function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+/g, ''); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); 
}, 'Please enter a valid phone number.'); 
+3

参考までに、 '.validate()'の前後に 'addMethod()'を置いても問題ありません。参照:http://jsfiddle.net/AFpaC/ – Sparky

+1

アハ!今はとてもシンプルなようです...しかし、迅速な返信のために何百万回もありがとう! – hull4baloo

5

:あなたの$('#survey1').validate()コードの前に、この関数を呼び出します。

jQuery.validator.addMethod("phoneUS", function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^(\+?1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); 
}, "Please specify a valid phone number"); 

DEMO:http://jsfiddle.net/AFpaC/

+1

チップをありがとう!これは非常に有用です。 – hull4baloo

関連する問題