jquery検証を使用して国際電話入力を検証する

Question

オタク！

私たちは皆、国際電話入力と呼ばれるすばらしいプラグインを知っています。独自の検証メソッドintlTelInput("isValidNumber")をjqueryの検証に結びつける方法はありますか？

intlTelInput("isValidNumber")戻り真 trueまたはfalseの場合の詳細は、以下の来て！：

今すぐ結果 "isValidNumber" に応じて、

var handleContactFormValidation = function() { 

    var value_form = $('#contact_form');//form i would like to validate where phone field is in! 
    var value_error = $('.alert-danger', value_form); 
    var value_success = $('.alert-success', value_form); 
    value_form.validate({ 
     errorElement: 'span', //default input error message container 
     errorClass: 'help-block help-block-error', // default input error message class 
     focusInvalid: false, // do not focus the last invalid input 
     ignore: "", // validate all fields including form hidden input 
     rules: {        
      phone: { 
       required: { 
        depends: function() { 
          if ($(this).intlTelInput("isValidNumber") == true) 
          return true 
         else 
          return false 
        } 
       } 
      }, 

     }, 

をまだあり偽

場合メソッドが返されている私は、jqueryの検証にその検証{真、偽}を検証する必要がありますが、上記は機能していません

Answer 1

この検証ロジックは意味をなさない...

rules: {        
    phone: { 
     required: { 
      depends: function() { 
       if ($(this).intlTelInput("isValidNumber") == true) 
        return true 
       else 
        return false 
      } 
     } 
    }, 
}, 

あなたがそれを書いた方法で、dependsプロパティは、電話番号が有効で、フィールドがないときphoneフィールドがrequiredであると言っています電話番号が無効の場合はrequiredです。この決定を行うには、フィールドに記入する必要があります。しかし、フィールドが既に入力されている場合は、requiredルールは重要ではなくなります。したがって、単に空白（有効な電話番号はありません）の場合、それはrequiredではなく、何も検証されません。

国際電話入力プラグインで電話番号を確認する場合は、この外部電話番号.intlTelInput()メソッドを呼び出すwrite a custom rule using the .addMethod() methodが必要です。

$('#myform').validate({ 
    ..... 
    rules: {        
     phone: { 
      required: true,  // field is mandatory 
      intlTelNumber: true // must contain a valid phone number 
     }, 
    }, 
    .... 
}); 

// create a custom phone number rule called 'intlTelNumber' 
jQuery.validator.addMethod("intlTelNumber", function(value, element) { 
    return this.optional(element) || $(element).intlTelInput("isValidNumber"); 
}, "Please enter a valid International Phone Number"); 

---

国際電話の入力プラグインを使用せずにこれを行うには...

jQuery.validator.addMethod("intlTelNumber", function(value, element) { 
    phone_number = phone_number.replace(/\s+/g, ""); 
return this.optional(element) || phone_number.length > 9 && 
    phone_number.match(/^(\+?1-?)?(\([2-9]([02-9]\d|1[02-9])\)|[2-9]([02-9]\d|1[02-9]))-?[2-9]([02-9]\d|1[02-9])-?\d{4}$/); 
}, "Please enter a valid International Phone Number"); 

この例では、米国の電話番号の正規表現を示しています。特定の電話番号要件に合わせて変更します。ヒント：正しい正規表現のためにあなたのInternational Telephone Inputプラグインを見てください。