5

私はブラウザ側の検証用に 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 に慣れていないので、お気軽にポインタ (余分な文字など) を提供してください。

ありがとう！

4

2 に答える 2

12

phoneUSjQuery Validate には関数標準が付属していません。追加する必要があります。コードの前に、次の$('#survey1').validate()関数を呼び出します。

// 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.');
于 2013-05-20T15:30:10.987 に答える
6

ルール/メソッドを含むadditional-methods.jsファイルを含める必要があります。phoneUS

または、別の JavaScript ファイルを含めたくない場合は、phoneUSルール/メソッドのみを手動で追加できます。

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

デモ: http://jsfiddle.net/AFpaC/

于 2013-05-20T15:55:15.857 に答える