1

初めて利用するため、不備がありましたら申し訳ございません。

現在、html・CSS・JSを用いて登録フォームを作成しています。
電話番号入力欄を下の画像のような形にする要望がでております。

電話番号入力欄

また、リアルタイムで文字数チェックを行いたいです。
内容としては、3つの入力欄の合計桁数が10・11桁以外であれば
「電話番号は10・11桁で表示してください」と表示するものです。
(*「default num」部分にエラー文は表示)

現在、以下のようにソースを記述しておりますが、うまくいきません。

         function ShowLength(resultid , tel1 , tel2 , tel3) {
            var tellen =  String(tel1.length) + String(tel2.length) + String(tel3.length);
            var elem = document.getElementById(resultid);

            if(tellen == 10 || tellen == 11){
                elem.innerHTML = "";
            }else{
                elem.innerHTML = "電話番号は10・11桁で入力してください";
            }
         }
            <input type="text" name="tel_1" id="tel_1" pattern="^[0-9]+$" maxlength="5" size="10">
            -
            <input type="text" name="tel_2" id="tel_2" pattern="^[0-9]+$" maxlength="4" size="10">
            -
            <input type="text" name="tel_3" id="tel_3" pattern="^[0-9]+$" maxlength="4" size="10"
             onkeyup="ShowLength('inputlength1',tel_1,tel_2,tel_3);">
             <p id="inputlength1">default</p>

javascriptがイマイチ理解できていないため、
うまく動作するためのアドバイスをお願い致します。

2
  • 電話番号が10または11桁とは限らないんですが(海外在住だと国際電話とか、184や186をつけて登録したいとかありそう)そもそもその要望自体を差し戻したほうが良いかもしれないと思ったりします。プログラミング上の課題としては面白そうですけど。
    – 774RR
    Commented 2018年6月15日 5:52
  • >電話番号が10または11桁とは限らないんですが 国内のみのサービス(店舗会員専用のHP)ですので、そちらは問題ありません。会員登録のフォームですので、一般的に184等もつけないと思います。
    – mummum
    Commented 2018年6月15日 5:53

1 件の回答 1

1

やりたいことはこんな感じでしょうか。

         function ShowLength(resultid , tel1 , tel2 , tel3) {
            var tel1Elem = document.getElementById(tel1);
            var tel2Elem = document.getElementById(tel2);
            var tel3Elem = document.getElementById(tel3);
            var tellen =  tel1Elem.value.length + tel2Elem.value.length + tel3Elem.value.length;

            var elem = document.getElementById(resultid);

            if(tellen == 10 || tellen == 11){
                elem.innerHTML = "";
            }else{
                elem.innerHTML = "電話番号は10・11桁で入力してください";
            }
         }
            <input type="text" name="tel_1" id="tel_1" pattern="^[0-9]+$" maxlength="5" size="10" onkeyup="ShowLength('inputlength1','tel_1', 'tel_2', 'tel_3');">
            -
            <input type="text" name="tel_2" id="tel_2" pattern="^[0-9]+$" maxlength="4" size="10" onkeyup="ShowLength('inputlength1','tel_1', 'tel_2', 'tel_3');">
            -
            <input type="text" name="tel_3" id="tel_3" pattern="^[0-9]+$" maxlength="4" size="10"
             onkeyup="ShowLength('inputlength1','tel_1', 'tel_2', 'tel_3');">
             <p id="inputlength1">default</p>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。