2017-04-16 15 views
2

検証がfalseを返すとき、入力フィールドのブートストラップツールチップを起動する際に問題があります。ブートストラップツールチップによるJavascript検証

詳細:

私はjavascript関数で自分のフォームを検証するためにアイデアを持っていると、これは非常にうまく機能しているが、検証がfalseの場合、何かが起こる必要があります。

私は(しかし、実際にフォームの検証と風船のためにこのようなものである場合)

私のコードブートストラップツールチップ、シンプル、制御が容易と今の私のために最善の解決策を考えていたJavaScriptでのonSubmitフォーム:

function validateFault() { 
    var phone_number = document.getElementById("phone_number").value; 

    var phone_number_regex = new RegExp("^([+]?[1]?[0-9]{9,15})$"); 

    $('#phone_number').tooltip('destroy'); 
    if (!phone_number) { 
     $('#phone_number').tooltip({placement: 'right', title: 'phone number is required', trigger: 'manual'}).tooltip('show'); 
    } 
    else { 
     if (!phone_number_regex.test(phone_number)) { 
      $('#phone_number').tooltip({placement: 'right', title: 'allowed phone number format: +999999999 (9-15 digits with possible plus)', trigger: 'manual'}).tooltip('show'); 
     } 
    } 

    return false; 
} 

この機能は、フォームに送信ボタンがクリックされたときに2回動作しているときに返されます。

電話番号がないときは、「電話番号は必須です」というテキストが表示され、そこに何か書いたときにツールチップに2番目のテキストが表示されます。

しかし、私は、ツールチップは、私はこのエラーを持って示している二度目、クリックされたとき:

Uncaught TypeError: Cannot read property 'trigger' of null 
    at HTMLDivElement.q (bootstrap.min.js:6) 
    at HTMLDivElement.e (jquery.min.js:3) 
    at HTMLDivElement.handle (bootstrap.min.js:6) 
    at HTMLDivElement.dispatch (jquery.min.js:3) 
    at HTMLDivElement.q.handle (jquery.min.js:3) 
    at Object.trigger (jquery.min.js:4) 
    at HTMLDivElement.<anonymous> (jquery.min.js:4) 
    at Function.each (jquery.min.js:2) 
    at r.fn.init.each (jquery.min.js:2) 
    at r.fn.init.trigger (jquery.min.js:4) 

を、私は私の入力フィールドに任意のツールチップアノテーションを持っていないので、おそらく問題は、適切にツールチップを開始しないですか、私の破壊命令で

しかし、私はツールヒントでタイトルを変更し、2番目のフィールドの検証後に再び表示する方法はわかりません。

バルーンのようなこの検証エラーを誰かが助けてくれるかもしれません。

答えて

1
$('#phone_number').attr('data-original-title', 'phone number is required') 
        .tooltip('fixTitle') 
        .tooltip('show'); 

これは私の質問のための答えですが、私はこの瞬間にそれを検索するが、おそらく誰かがどんなことなく、同じ問題

を持ってオプションと何かを破壊し、提出

にツールチップのタイトルを変更することなく、重要なのは 'data-original-title'です。なぜなら 'title'はこれが私の望むように機能しないからです。