質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17040questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9299questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6936questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6025questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

エントリーシートの入力エラー(JavaScript)がうまく表示されません。

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 688

r110

score 6

エントリーシートを作成したのですが、javascriptで作成した入力エラー表示がでません。
ローカルで確認すると作動するのですが、サイトにあげると表示が出ません。
googleで検証したのですが、
「js:70 Uncaught SyntaxError: Invalid regular expression: missing /」と表示されました。

//全角チェック
case 0:
if(value.match(/^[^ -~。-゚]*$/)){ ←70行目はここの部分なのですが、
「/(スラッシュ)」が抜けているということなのでしょうか?

jsは全くの初心者で、エラーの意味もわかりません。
入力エラーが表示される様にするにはどうしたらいいのか、教えていただけますでしょうか。

どうぞよろしくお願いいたします。

<div class="prof_form">
<form id="entryForm" method="post">

<table>
<tr>
<th scope="row" class="item"><label for="formName">お名前(漢字)</label></th>
<td class="hissu">必須</td>
<td ><input type="text" name="formName" id="formName" placeholder="販促 太郎" ></td>
</tr>

<tr>
<th scope="row" class="item"><label for="formFurigana">ふりがな(ひらがな)</label></th>
<td class="hissu">必須</td>
<td><input type="text" name="formFurigana" id="formFurigana" placeholder="はんそく たろう"></td>
</tr>

<tr>
<th scope="row" class="item"><label for="formPostcode">郵便番号</label></th>
<td class="hissu">必須</td>
<td><input type="text2" name="formPostcode" id="formPostcode" placeholder="100 - 1000"></td>
</tr>

<tr>
<th scope="row" class="item">都道府県 </th>
<td class="hissu">必須</td>
<td><select name="address">
<option value="" selected="selected">選択して下さい</option>
<optgroup label="北海道・東北地方">
<option value="北海道">北海道</option>
<option value="沖縄県">沖縄県</option>
</optgroup>
</select>
</td>
</tr>

<tr>
<th scope="row" class="item"><label for="formAdd">ご住所</label></th>
<td class="hissu">必須</td>
<td ><input type="text" name="formAdd" id="formAdd" placeholder="東京都" ></td>
</tr>

<tr>
<th scope="row" class="item"><label for="formTell">電話番号</label></th>
<td class="hissu">必須</td>
<td><input type="text" name="formTell" id="formTell"  placeholder="100-0005-0005" ></td>
</tr>
<tr>

<th scope="row" class="item"><label for="formMail">メールアドレス</label></th>
<td class="hissu">必須</td>
<td><input type="text" name="formMail" id="formMail" placeholder="taro.hansoku@calneco.co.jp"></td>
</tr>
</table>
</form>
</div>
$(function(){

    function setentryForm(target){

        var ERROR_MESSAGE_CLASSNAME = 'errorMsg'; //エラー時のメッセージ要素のclass名
        var ERROR_INPUT_CLASSNAME = 'errorInput'; //エラー時のinput要素のclass名

        var items = []; //チェック対象となるテキスト入力要素を格納した配列
        var addressObj; //チェック対象となるselect要素のセレクタを格納した変数
        var genreObj; //チェック対象となるcheckbox要素のセレクタを格納した変数

        //項目チェックする
        function checkAll(){
            var errorCount = 0;
            //input,textareaのチェック
            for( var i=0; i<items.length; i++ ){
                if( items[i].prop('isSuccess') == false ){
                    errorCount++;
                };
            };
            //selectのチェック
            if( addressObj.prop('isSuccess') == false ){
                errorCount++;
            };
            //チェックボックスのチェック
            if( genreObj.isSuccess == false ){
                errorCount++;
            };
            //エラーカウントが0であれば、エラー無し
            if( errorCount == 0 ){
                target.find('input[type=submit]').attr('disabled', false);
            }else{
                target.find('input[type=submit]').attr('disabled', true);
            };
        };

        //エラーメッセージの追加
        function addErrorMessage(selector, msg){
            removeErrorMessage(selector);
            selector.before('<span class="'+ERROR_MESSAGE_CLASSNAME+'">'+msg+'</span>');
            selector.addClass(ERROR_INPUT_CLASSNAME);
        };

        //エラーメッセージの削除
        function removeErrorMessage(selector){
            var msgSelector = selector.parent().find('.'+ERROR_MESSAGE_CLASSNAME);
            if( msgSelector.length != 0 ){
                msgSelector.remove();
                selector.removeClass(ERROR_INPUT_CLASSNAME);
            };
        };

        //input,textareaの未入力チェック
        function checkEmptyText(selector, msg){
            if( selector.val() == '' ){
                addErrorMessage(selector, msg);
                selector.prop('isSuccess', false);
            }else{
                removeErrorMessage(selector);
                selector.prop('isSuccess', true);
            };
        };

        //inputのフォーマットチェック
        function checkFormatText(selector, mode, msg){
            var value = selector.val();
            switch(mode){
                //全角チェック
                case 0:
                    if(value.match(/^[^ -~。-゚]*$/)){
                        selector.prop('isSuccess', true);
                    }else{
                        selector.prop('isSuccess', false);
                    };
                    break;
                //ふりがなのみ
                case 1:
                    if(value.match(/^[\u3040-\u309F]+$/)){
                        selector.prop('isSuccess', true);
                    }else{
                        selector.prop('isSuccess', false);
                    };
                    break;
                //半角数字のみ
                case 2:
                    if(value.match(/^[0-9{}-]*$/)){
                        selector.prop('isSuccess', true);
                    }else{
                        selector.prop('isSuccess', false);
                    };
                    break;
                //メールアドレス
                case 3:
                    if(value.match(/^[a-zA-Z0-9!$&*.=^`|~#%'+\/?_{}-]+@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,6}$/)){
                        selector.prop('isSuccess', true);
                    }else{
                        selector.prop('isSuccess', false);
                    };
                    break;
            };
            if( selector.prop('isSuccess') == false ){
                addErrorMessage(selector, msg);
            }else{
                removeErrorMessage(selector);
            };
        };

        //selectのチェック
        function checkEmptySelect(selector, msg){
            if( selector.val() == '' ){
                addErrorMessage(selector, msg);
                selector.prop('isSuccess', false);
            }else{
                removeErrorMessage(selector);
                selector.prop('isSuccess', true);
            };
        };

        //checkboxのチェック
        function checkEmptyCheckBox(selector, msg, ul){
            var item = selector.item;
            var checkLen = 0;
            item.each(function(index){
                if( $(this).prop('checked') ) checkLen++;
            });
            if( checkLen == 0 ){
                addErrorMessage(ul, msg);
                selector.isSuccess = false;
            }else{
                removeErrorMessage(ul);
                selector.isSuccess = true;
            };
        };

        //初期設定
        function init(){
            //submitを無効にする
            target.find('input[type=submit]').attr('disabled', true);
            //submitイベントの設定
            target.on({
                'submit': function(){
                    return false;
                }
            });
            //input要素を配列に格納
            items = [
                target.find('input[name=formName]'),
                target.find('input[name=formFurigana]'),
                target.find('input[name=formTell]'),
                target.find('input[name=formMail]'),
                target.find('input[name=formPostcode]'),
                target.find('input[name=formAdd]'),
                target.find('input[name=formCompany]'),
                target.find('input[name=formPosition]'),
                target.find('textarea[name=formInquiry]')

            ];
            //input要素のプロパティを設定
            $.each(items, function(index){
                items[index].prop('isSuccess', false);
            });
            //enterキーでsubmitしてしまうのを防止する
            target.find('input[type=text]').on({
                'keypress': function(e){
                    if( (e.keyCode == 13) ) return false;
                }
            });
            //名前
            items[0].on({
                'blur': function(){
                    checkEmptyText( $(this), 'お名前をご入力ください。' );
                    if( $(this).prop('isSuccess') ) checkFormatText( $(this), 0, '入力フォーマットが正しくありません。' );
                    checkAll();
                }
            });
            //ふりがな
            items[1].on({
                'blur': function(){
                    checkEmptyText( $(this), 'ふりがなをご入力ください。' );
                    if( $(this).prop('isSuccess') ) checkFormatText( $(this), 1, '入力フォーマットが正しくありません。' );
                    checkAll();
                }
            });
            //電話番号
            items[2].on({
                'blur': function(){
                    checkEmptyText( $(this), '電話番号をご入力ください。' );
                    if( $(this).prop('isSuccess') ) checkFormatText( $(this), 2, '半角英数でご記入ください' );
                    checkAll();
                }
            });
            //メールアドレス
            items[3].on({
                'blur': function(){
                    checkEmptyText( $(this), 'メールアドレスをご入力ください。' );
                    if( $(this).prop('isSuccess') ) checkFormatText( $(this), 3, '入力フォーマットが正しくありません。' );
                    checkAll();
                }
            });
            //お問い合わせ内容
            //items[4].on({
            //    'blur': function(){
            //        checkEmptyText( $(this), '郵便番号をご入力ください' );
            //        checkAll();
            //    }
            //});//

            items[4].on({
                'blur': function(){
                    checkEmptyText( $(this), '郵便番号をご入力ください' );
                    if( $(this).prop('isSuccess') ) checkFormatText( $(this), 2, '半角英数でご記入ください' );
                    checkAll();
                }
            });

                        //お問い合わせ内容
            items[5].on({
                'blur': function(){
                    checkEmptyText( $(this), '住所をご入力ください。' );
                    checkAll();
                }
            });
                    //名前
            items[6].on({
                'blur': function(){
                    checkEmptyText( $(this), '貴社名をご入力ください。' );
                    if( $(this).prop('isSuccess') ) checkFormatText( $(this), 0, '入力フォーマットが正しくありません。' );
                    checkAll();
                }
            });

                    //名前
            items[7].on({
                'blur': function(){
                    checkEmptyText( $(this), '部署名をご入力ください。' );
                    if( $(this).prop('isSuccess') ) checkFormatText( $(this), 0, '入力フォーマットが正しくありません。' );
                    checkAll();
                }
            });



            //selectの設定
            addressObj = target.find('select[name=address]');
            addressObj.prop('isSuccess', false).on({
                'change': function(){
                    checkEmptySelect($(this), '都道府県を選択してください。');
                    checkAll();
                }
            });
            //checkboxの設定
            genreObj = { item: target.find('input[name=formGenre]'), isSuccess: false };
            genreObj.item.on({
                change: function(){
                    checkEmptyCheckBox( genreObj, 'お問い合わせ区分にチェックを入れてください。', $('#checkGenreList') );
                    checkAll();
                }
            });
        };

        init();

    };

    setentryForm($('#entryForm'));

});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • r110

    2017/09/05 11:14

    ご確認頂きありがとうございます。サーバー側の環境というのは、どの様なことをお伝えすればいいのでしょうか?初心者で申し訳ありません!

    キャンセル

  • mts10806

    2017/09/05 11:36

    私自身サーバーに精通しているわけではないのですが、サーバーの種類(CentOSとか)、サーバー実行環境(Apacheとか)、自身が利用されている「サイト」に関して状況が分かるものですね。もしレンタルなのであれば仕様が公開されていますのでレンタル先とプラン?のようなものを教えてもらえればこちら側でもある程度確認できます。

    キャンセル

  • mts10806

    2017/09/05 11:36

    あとできればサイトにアップする際に利用しているツールや設定があれば併せてお願いします。

    キャンセル

回答 2

0

スラッシュが全角になってるとかってことはないですよね

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/15 11:57

    ご回答ありがとうございます。スラッシュ確認しましたが、全角になっていませんでした。

    キャンセル

0

HTMLがShift_JISで書かれているとかですかね?

<script src="validate.js" charset="UTF-8"></script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/15 12:00

    ご回答ありがとうございます、HTMLはShift_JISで書いています。
    それが原因の場合は、どのように修正したらよろしいのでしょうか?

    キャンセル

  • 2017/09/15 13:38

    すでに回答しています。

    キャンセル

  • 2017/09/15 13:57

    失礼しました!ご連絡ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17040questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9299questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6936questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6025questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。