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

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

ただいまの
回答率

90.62%

  • JavaScript

    15880questions

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

  • jQuery

    6523questions

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

ボタンを押したときにJSが実行されるが、その後連打しても内容が変わらない限り、実行されないようにできないのでしょうか?

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,821
退会済みユーザー

退会済みユーザー

送信ボタンを押しまくるとどんどん背景が縦に長くなってしまう問題が起きます。
ボタンを押したときにJSが実行されるが、その後連打しても内容が変わらない限り、実行されないようにできないのでしょうか?
そしてinputboxにテキストがを入れて送信ボタンを押した時に背景の縦幅が小さくなる、つまり元のサイズに戻るように指定です。
これも連打すると小さくなり続けます。

空の状態で一度押すと、中にテキストを入れて縦が元のサイズに小さくなった時のみ、もう一度空にしたときに押すと伸びるという風にしたいです。
そこまではできたのですが、空の状態で送信ボタンを押しまくると当たり前ですが永遠に背景の縦幅が大きくなり続けます。
toggleclassしかないですかね?

再現
https://codepen.io/anon/pen/bBxqjR

なぜかボタンを押しても、再現されませんが、つまり
下記の部分のspanの中にinputが空だった場合、送信ボタンを押すと
必須項目と出るということです。

<dt>
<label for="name">お名前 (必須)</label>
</dt>
<span class="js-is-error--text-input1"></span>

するとお名前の下に必須項目というテキストが出てきます。
すると一文字分背景が足りなくなる対処をしたいということです。

$('#js-error-inquiry').submit(function(){
    var checkform = true;
    // 以下input一つ目
    // inputタグ
    if($('.js-is-input-error1').val() == ''){
        // inputに文字が入っていなければ、必須項目と出るようにする。
        // spanタグ
        $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
                                                              'text-shadow': '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '2px 2px 2px #fff'}); // +改行を可能にするために必要
        // 背景の縦幅を必須項目というテキスト分高くする。
        var heightGet = $('#js-height-adjustment').height(); // sectionタグ
        $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
        checkform = false; // var省略
    }else{
            // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
            $('.js-is-error--text-input1').text(''); // spanタグ
    }

上記のcheckform = false; // var省略の前にもうひとつifをつくって、
heightGet=trueとして、そのifにheight==falseという条件を加えれば、
falseになった時だけ1emプラスされるとできませんか?

ただこんな大変なことをしないと連打防止はできないのでしょうか?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

最終的なエラーの形式を理解しきれなかったのですが、入力必須チェックのサンプルを提示します。基本的にはエラーがあったら、その文字を対象のテキストの上に表示して背景色を変更する物です。ヒントになればと思います。
同じエラーを出し続けない、という観点では

$("p.error").remove();
$("dl dd").removeClass("error");


で、エラー内容を初期化している、というところがポイントです。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
    //お問い合わせフォームチェック
    $(function(){
      $('#js-error-inquiry').submit(function(){
        //エラーの初期化
        $("p.error").remove();
        $("dl dd").removeClass("error");
        var checkform = true;
        $(":text,textarea").filter(".validate").each(function(){
          //必須項目のチェック
          $(this).filter(".required").each(function(){
            if($(this).val()==""){
              $(this).parent().prepend("<p class='error'>必須項目です</p>")
              $("p.error").parent().addClass("error");
              checkform = false;
            }
          });
        })
        return checkform;
      });
    });
    </script>
    <style type="text/css">
      form {background-color:green;}
      dl dd p.error{
        margin:0;
        color:red;
        font-weight:bold;
        margin-bottom:1em;
      }
      dl dd.error input {background:#FFCCCC;}
    </style>
  </head>
  <body>
    <form id="js-error-inquiry" class="inquiry-form" role="form"><!-- action="mail.php" -->
    <dl>
      <dd>
        <input type="text" name="name" size="100" class="validate required" />
      </dd>
      <dd>
        <input type="text" name="name" size="100" class="validate required" />
      </dd>
    </dl>
      <button type="submit">test</button>
    </form>
  </body>
</html>

追記(html全体)

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
//お問い合わせフォームチェック
    $(function(){
$('#js-error-inquiry').submit(function(){
    var checkform = true;
    // 以下input一つ目
    // inputタグ
    if($('.js-is-input-error1').val() == ''){
        //まだエラーメッセージが出力されていなければ、背景色を長くする
        if($('.js-is-error--text-input1').text() == ''){
          var heightGet = $('#js-height-adjustment').height(); // sectionタグ
          //$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
          $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
        }
        // inputに文字が入っていなければ、必須項目と出るようにする。
        // spanタグ
        $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
                                                              'text-shadow': '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '2px 2px 2px #fff'}); // +改行を可能にするために必要
        checkform = false; // var省略
    }else{
        //既にエラーメッセージがあった場合は背景色の長さを元に戻す
        if($('.js-is-error--text-input1').text() != ''){
          var heightGet = $('#js-height-adjustment').height(); // sectionタグ
          $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
        }
        // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
        $('.js-is-error--text-input1').text(''); // spanタグ
    }
    return checkform;
});
    });
    </script>
    <style type="text/css">
#js-height-adjustment{
  background-color:red;
height:500px;
}
.inquiry {
    position: relative;
    padding: 34rem 0 35.5rem 0;
    width : 100%;
    /*background: url(./img/common-img/inquery-back.png) no-repeat;*/
    background-position: center center;
    background-size: cover;
}

@media (min-width: 960px) {
.inquiry {
    padding: 53rem 0 28rem 0;
}
}

/*入力フォーム一覧の位地*/
.inquiry-wrap {
    position: absolute;
    top: 7.6%;
    left: 8%;
}

@media (min-width: 640px) {
.inquiry-wrap {
    top: 7.6%;
    left: 11%;
}
}

@media (min-width: 960px) {
.inquiry-wrap {
    position: absolute;
    top: 10.3%;
    left: 11%;
}
}

.heading2_color_white {
    text-shadow:
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05)
                ;
}

.heading2_color_white,.inquiry-form dt {
    color: white;
}

.inquiry-form dt {
    text-shadow:
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                2px 2px 2px rgba(0,0,0,.9);
    color: #000;
    font-weight: bold;
}

/*フォーム~ボタンまでの横幅、行間一括指定、個人情報ボックス以外*/
.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
    width: 90%;
    height: 1.8em;
    line-height: 1.8;
    border-style: none;/*選択時の枠線を無くす*/
}

@media (min-width: 960px) {
.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
    width: 40%;
}
}

.inquiry-form__input-box,.inquiry-form__input-box_kind_textarea {
    opacity: 0.7;
}

.inquiry-form__input-box {
    margin-bottom: 1rem;
}

.inquiry-form__input-box_kind_textarea .inquiry-form__body {
    margin-bottom: 2rem;
    resize: horizontal;/*横のみリサイズ可能*/
}

/* コメントボックスの高さ */
.inquiry-form__body {
    height: 7rem;
}

@media (min-width: 960px) {
.inquiry-form__body {
    height: 10rem;
}
}
/* /コメントボックスの高さ */

.inquiry-form__privacy {
    border: 0.1rem solid #03AFFF;
    width: 78%;
    padding: 2.3rem 3rem 0 3rem;
    height: 12rem;
    line-height: 2;
    overflow-y: scroll;
    background: #fff;
    opacity: 0.7;
}

@media (min-width: 960px) {
.inquiry-form__privacy {
    width: 37%;
}
}

.inquiry-form__primary-btn {
    display: block;
    margin-top: 4rem;
    height: 5.5rem;
    background: rgb(0, 239, 123);
    color: #fff;
    font-size: 2.7rem;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 5.5rem;
    text-align: center;
    text-shadow: 1px 1px 0px #000,
                 -1px 1px 0px #000,
                 1px -1px 0px #000,
                 -1px -1px 0px #000;
    box-shadow: 2px 2px 2px rgba(0,0,0,.9);
}
form {background-color:green;}
    </style>
  </head>
  <body>
<section id="js-height-adjustment" class="inquiry">
                    <div class="inquiry-wrap"><!-- コンタクトの要素をまとめてポジションで移動するため -->
                        <h2 id="js-inquiry" class="heading2_color_white heading2">CONTACT</h2>
                        <form id="js-error-inquiry" class="inquiry-form"  method="post" role="form"><!-- action="mail.php" -->
                            <dl>
                                <dt>
                                    <label for="name">お名前&nbsp;(必須)</label>
                                </dt>
                                <span class="js-is-error--text-input1"></span>
                                <dd class="inquiry-form__input-box">
                                    <input id="name" class="js-is-input-error1" name="name" onclick=””></dd>
                            <button class="inquiry-form__primary-btn js-fadein-from-bottom
animation-hover action-hover" type="submit">ご相談完了</button>
                        </form>
                    </div><!-- /.inquiry-wrap -->
                </section><!-- /#about -->
  </body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/16 18:08

    ありがとうございます。
    https://codepen.io/anon/pen/Ypdywp
    に再現しました。
    確かに押したときに、必須項目というテキストが出るところは同じなのですが、
    情報不足で恐縮ですが、背景の画像がレスポンシブになっており、
    padding: 34rem 0 35.5rem 0;のようにpaddingを使った形で背景画像のレスポンシブを再現しています。

    .inquiry {
    position: relative;
    padding: 34rem 0 35.5rem 0;
    width : 100%;
    background: url(../img/common-img/inquery-back.png) no-repeat;
    background-position: center center;
    background-size: cover;
    }

    @media (min-width: 960px) {
    .inquiry {
    padding: 53rem 0 28rem 0;
    }
    }


    キャンセル

  • 2016/12/16 18:19

    /*入力フォーム一覧の位地*/
    .inquiry-wrap {
    position: absolute;
    top: 7.6%;
    left: 8%;
    }

    @media (min-width: 640px) {
    .inquiry-wrap {
    top: 7.6%;
    left: 11%;
    }
    }

    @media (min-width: 960px) {
    .inquiry-wrap {
    position: absolute;
    top: 10.3%;
    left: 11%;
    }


    そして上記のように、問い合わせフォームのパーツがpositionで配置されているため、
    必須項目というテキストが出た分、背景画像が大きくなってくれません。

    キャンセル

  • 2016/12/16 22:32

    おそらくaddclassであれば、送信ボタンを押しまくっても、無限に高さが大きくなることはないのでしょうが、その分cssで指定できるものしか使えないという制限ができますよね。
    背景画像がレスポンシブで、その上に載っている要素がpositionで配置されている場合、
    heightはpaddingで指定しいるのですが、padding: 34rem 0 35.5rem 0;というように%で指定しなければ、padding: 36rem 0 36.5rem 0;と1rem足したもので上書きしてやるようなtoggleclassをつければよいということでしょうか?
    %の場合は使えませんが。

    キャンセル

  • 2016/12/19 12:59

    この件ですが、問題の状況となったソース全体を見せて貰っても良いでしょうか?
    どの様に組んであるかが分かると、もう少し情報が提供できるかもしれません。

    キャンセル

  • 2016/12/19 13:20

    https://codepen.io/anon/pen/VmgPav
    に再現しましたが、送信ボタンを押しても、必須項目というテキストが出てきません。
    別途コピペしてもらった方がいいかもしれませんね。

    キャンセル

  • 2016/12/20 09:33

    遅くなりました。ソースを確認しました。まず伸び続けている直接の原因はjavascriptの判定が誤っているからだと思います。頂いたソースの69行目・70行目を必ず通るロジックになってしまっている為、背景の高さが常に変更されてしまっているみたいですね。
    ここをコメントアウトしたら、ボタンを押しても伸び続ける事はなくなりましたが、そういう事ではないですか?

    キャンセル

  • 2016/12/20 09:43

    上記の内容で回答を追記しました。

    キャンセル

  • 2016/12/20 10:41

    ありがとうございます。

    追記(頂いたソースを加工したもの(javascript抜粋)
    をコピペしてみたのですが、送信ボタンを押しても背景画像の縦幅に変化が起こらなくなりました。

    具体的にどの部分を変更されたか教えていただければ幸いです。

    キャンセル

  • 2016/12/20 11:35

    すいません。質問を捉え違えているかもしれません。$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');を一通り、コメントアウトしています。これであればgreenが背景のformの高さがエラーによって伸び縮みするので、それが正解かと思っていました。
    ちなみに、background-sizeにcoverが指定されているので背景画像が全画面表示されていると思いますが、それは認識合っているでしょうか?背景画像の縦幅を気にされる理由が掴み切れなかったので…

    キャンセル

  • 2016/12/20 12:04

    http://qiita.com/39_isao/items/009f2382f87988039215
    と同じようなことをやっています。

    すると、SPの時に送信ボタンを押すと、背景の上に載っているフォームの長さが長くなるので、
    submitbuttonが背景画像をはみ出てしまいます。

    PCは余裕があるので大丈夫なのですが、PCも上だけやたらホワイトスペースがあって下はカツカツという不格好な状態になります。

    キャンセル

  • 2016/12/20 13:54

    私の画面のキャプチャを回答に乗せましたが、その様にはなっていない、という形ですか?「上だけやたらホワイトスペース」は出てませんね…他の要素が考えられたりしませんか?

    キャンセル

  • 2016/12/20 14:07

    おそらく添付頂いたものは問い合わせフォームがpositionで配置されていないのではないですか?
    そうであれば、中身の問い合わせフォームが大きくなれば自動的に、
    背景のボックスも大きくなることはうなずけます。

    しかし私の物は下記のように問い合わせフォームがpositionで配置されているので、浮いている状態です。
    つまり浮いている問い合わせフォームがいくら大きくなっても背景のボックスはまったく影響を受けないので、背景からはみ出るということです。

    .inquiry {
    position: relative;
    padding: 34rem 0 35.5rem 0;
    width : 100%;
    background: url(../img/common-img/inquery-back.png) no-repeat;
    background-position: center center;
    background-size: cover;
    }

    キャンセル

  • 2016/12/20 14:16

    https://codepen.io/anon/pen/VmgPav

    こちらの赤い部分が背景の画像と同じ部分です。
    緑はフォームなので背景ではありません。

    うまく再現できないですが、必須という文字が出ると緑の縦幅が広がり、
    赤をはみ出る現象が起きるということです。
    それを防ぐために赤のheightを必須という文字列分1em足すことで相殺したいということです。

    キャンセル

  • 2016/12/20 14:45

    なるほど…そうすると、私の知識ではjavascriptで判定してemを足し引きするくらいしか浮かんでこないですね…(回答に追記します。)

    キャンセル

  • 2016/12/20 14:50

    私もそう思って作ったのですが、問題は連打すると、赤い部分が大きくなり続けてしまうことだけです。
    ここさえ何とかなれば解決なのですが、そんな方法はあるのでしょうか?

    キャンセル

  • 2016/12/20 14:55

    それはhttps://codepen.io/anon/pen/VmgPavのJSで見ると70行目をコメントアウトするだけで良いのでは?前述しましたが、この$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');が何の判定も無く必ず通るロジックになっているので、ボタンを押す度に赤い部分を大きくしていると思いますよ。

    キャンセル

  • 2016/12/20 15:04

    その通りなんですが、必須項目というテキストが出ているかいないか、一度押して大きくなったら、二度目は、テキストを入れて小さくしてからでないと押せないというようなロジックをどのようんjqueryで実装できるかがわかりません。
    論理はわかりますが、プログラミングができないということです。

    キャンセル

  • 2016/12/20 15:08

    上記の私の回答(一番最後の追記)のプログラムでは、既にエラーが表示されているかどうかを判定しています。既にエラーが表示されていて、かつエラーが無い場合には背景の高さを-1em。エラーが表示されておらずかつ、エラーがあった場合(checkformがfalse)の場合には背景の高さを+1emしています。
    これであれば、既にエラーが出ている時に連打されても背景は大きくならず、また、エラーが解消されたらその分、背景が小さくなると思うのですが、如何でしょうか?

    キャンセル

  • 2016/12/20 15:17

    新しいコードに気づかずすいません。

    /既にエラーが表示されていてチェックフォームが正常なら1emをマイナスする
    if($('.js-is-error--text-input1').text() != ''){
    if(checkform){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    }else{
    if(!checkform){
    // 背景の縦幅を必須項目というテキスト分高くする。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
    }
    }

    上記はfalseを省略してtrueだった時のみ実行するとされたのですね。
    これを三つ分作ればよさそうですねやってみます。
    ありがとうございました

    キャンセル

  • 2016/12/20 16:05

    下記をそのまま使っても送信されてしまうのでダメでした。
    //既にエラーが表示されていてチェックフォームが正常なら1emをマイナスする
    if($('.js-is-error--text-input1').text() != ''){
    if(checkform){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    }else{
    if(!checkform){
    // 背景の縦幅を必須項目というテキスト分高くする。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
    }
    }





    よって下記のように自分で改良してみましたが、やはりだめです。
    1.
    $('#js-error-inquiry').submit(function(){
    var checkform = true;
    if($('.js-is-error--text-input1').text() != ''){

    if(checkform){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    }else{
    if(!checkform){
    // 背景の縦幅を必須項目というテキスト分高くする。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');checkform = false;
    }
    }
    return checkform;
    });



    2.
    $('#js-error-inquiry').submit(function(){
    var checkform = true;
    if($('.js-is-error--text-input1').text() == ''){

    if(checkform){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');checkform = false;
    }
    }else{
    if(!checkform){
    // 背景の縦幅を必須項目というテキスト分高くする。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    }
    return checkform;
    });


    確認ですが、
    if(checkform)とはcheckform変数の中身がtrueだったらという条件式。
    if(!checkform)とはcheckform変数の中身がfalseだったらという条件式。

    if($('.js-is-error--text-input1').text() != ''){
    の!==は空でなかったら、つまり何かテキストが入っていた場合という条件式。


    何分初心者なので、このあたりも、説明がないとわからない状態です。
    恐縮ですが宜しくお願いします。

    キャンセル

  • 2016/12/20 16:17 編集

    >if(checkform)とはcheckform変数の中身がtrueだったらという条件式。
    >if(!checkform)とはcheckform変数の中身がfalseだったらという条件式。
    ⇒ご認識の通りです。

    >if($('.js-is-error--text-input1').text() != ''){
    >空でなかったら、つまり何かテキストが入っていた場合という条件式。
    ⇒これもご認識通りです。また、サンプルのjavascriptを回答に編集しました。
    デバッグできるようにalert入れたままにしています。
    これで確認できますか?

    キャンセル

  • 2016/12/20 16:28

    ありがとうございます。やってけっかを報告します。

    キャンセル

  • 2016/12/20 16:39

    度々の投稿ですいません。javascriptの判定が誤っていた様なので、回答を再修正しました。ポイントは
    if($('.js-is-input-error1').val() == ''){
    //まだエラーメッセージが出力されていなければ、背景色を長くする
    if($('.js-is-error--text-input1').text() == ''){
    alert('通った');
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    // inputに文字が入っていなければ、必須項目と出るようにする。
    // spanタグ
    $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要

    checkform = false; // var省略
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-input1').text() != ''){
    alert('通った2');
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input1').text(''); // spanタグ
    }
    になります。
    コロコロと変えてしまって本当に申し訳ないです…

    キャンセル

  • 2016/12/20 17:04

    確かに下記のようにやっても空の時に背景のサイズが変わりませんでした。
    これが原因でしょうか?
    alert cが実行されません。
    //お問い合わせフォームチェック
    $(function(){
    $('#js-error-inquiry').submit(function(){
    var checkform = true;
    // 以下input一つ目
    // inputタグ
    if($('.js-is-input-error1').val() == ''){
    // inputに文字が入っていなければ、必須項目と出るようにする。
    // spanタグ
    $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要

    checkform = false; // var省略
    }else{
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input1').text(''); // spanタグ
    }
    //既にエラーが表示されていてチェックフォームが正常なら1emをマイナスする
    if($('.js-is-error--text-input1').val() != ''){
    alert('b');
    alert(checkform);
    if(checkform){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    alert('c');
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    alert('c');
    }
    }else{
    alert('a');
    alert(checkform);
    if(!checkform){
    // 背景の縦幅を必須項目というテキスト分高くする。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
    }
    }
    // 以下input二つ目
    // inputタグ
    if($('.js-is-input-error2').val() == ''){
    // inputに文字が入っていなければ、必須項目と出るようにする。
    $('.js-is-error--text-input2').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
    checkform = false; // var省略
    }else{
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input2').text(''); // spanタグ
    }
    //既にエラーが表示されていてチェックフォームが正常なら1emをマイナスする
    if($('.js-is-error--text-input2').val() != ''){
    alert('b');
    alert(checkform);
    if(checkform){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    }else{
    alert('a');
    alert(checkform);
    if(!checkform){
    // 背景の縦幅を必須項目というテキスト分高くする。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
    }
    }
    // 以下textarea
    if($('.js-is-error-body').val() == ''){
    $('.js-is-error--text-texarea').text('必須項目です').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    checkform = false;
    }else{
    $('.js-is-error--text-texarea').text(''); // spanタグ
    }
    //既にエラーが表示されていてチェックフォームが正常なら1emをマイナスする
    if($('.js-is-error--text-texarea').val() != ''){
    alert('b');
    alert(checkform);
    if(checkform){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    }else{
    alert('a');
    alert(checkform);
    if(!checkform){
    // 背景の縦幅を必須項目というテキスト分高くする。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
    }
    }
    // return checkform(変数 )(テキストが入っている場合はture、入っていない場合はfalseが変数に入る。)
    // return checkform;は変数の指定位置までもどる。checkform変数に戻ってくださいということ。
    // return false;の場合は、送信ボタンが実行されないようにしている。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    //$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
    return checkform;
    });
    });

    キャンセル

  • 2016/12/20 17:06

    具体的にどこの部分が間違っていたのでしょうか?
    何分長いソースなので、どこが違うのかわかりませんでした。
    教えていただければ幸いです。よろしくお願いします。

    キャンセル

  • 2016/12/20 17:14

    下記の判定だと、事前に「js-is-error--text-input1'」のtextが入ってしまっているために上手く判定が出来ていませんでした。
    ***ダメ***
    if($('.js-is-error--text-input1').text() != ''){
    if(checkform){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    }else{
    if(!checkform){
    // 背景の縦幅を必須項目というテキスト分高くする。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
    }
    }
    ***ダメ***
    なので、上記の判定をごっそり削ります。
    そして、入力されているか判定する分岐の中に、既にエラーメッセージが出力されているかどうかを判定する処理を加える事にしました。

    ***改善***
    f($('.js-is-input-error1').val() == ''){
    //まだエラーメッセージが出力されていなければ、背景色を長くする
    if($('.js-is-error--text-input1').text() == ''){
    alert('通った');
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    // inputに文字が入っていなければ、必須項目と出るようにする。
    // spanタグ
    $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要

    checkform = false; // var省略
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-input1').text() != ''){
    alert('通った2');
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input1').text(''); // spanタグ
    }
    ***改善***

    キャンセル

  • 2016/12/20 18:23

    すいません。長いコードなのでどの部分が改善されているのかわからなくなってしまいましたので、
    全文見せてもらうか、どの部分をどう変えたか具体的に示していただけませんでしょうか?

    キャンセル

  • 2016/12/20 18:24

    回答のjavascriptを編集しました。

    キャンセル

  • 2016/12/20 18:41

    //お問い合わせフォームチェック
    $(function(){
    $('#js-error-inquiry').submit(function(){
    var checkform = true;
    // 以下input一つ目
    // inputタグ
    if($('.js-is-input-error1').val() == ''){
    //まだエラーメッセージが出力されていなければ、背景色を長くする
    if($('.js-is-error--text-input1').text() == ''){
    alert('通った');
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    // inputに文字が入っていなければ、必須項目と出るようにする。
    // spanタグ
    $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要

    checkform = false; // var省略
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-input1').text() != ''){
    alert('通った2');
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input1').text(''); // spanタグ
    }
    // 以下input二つ目
    // inputタグ
    if($('.js-is-input-error2').val() == ''){
    // inputに文字が入っていなければ、必須項目と出るようにする。
    $('.js-is-error--text-input2').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
    checkform = false; // var省略
    }else{
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input2').text(''); // spanタグ
    }
    // 以下textarea
    if($('.js-is-error-body').val() == ''){
    $('.js-is-error--text-texarea').text('必須項目です').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    checkform = false;
    }else{
    $('.js-is-error--text-texarea').text(''); // spanタグ
    }
    // return checkform(変数 )(テキストが入っている場合はture、入っていない場合はfalseが変数に入る。)
    // return checkform;は変数の指定位置までもどる。checkform変数に戻ってくださいということ。
    // return false;の場合は、送信ボタンが実行されないようにしている。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    //$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
    return checkform;
    });
    });

    ですよね。
    ご対応いただきありがとうございます。

    ただ今度は空の状態でクリックすると、背景が大きくならなくなりました。
    大変ですね。
    これくらいになると、自作しないのでしょうか?

    キャンセル

  • 2016/12/21 12:32

    $(function(){
    $('#js-error-inquiry').submit(function(){
    var checkform = true;
    // 以下input一つ目
    // inputタグ
    if($('.js-is-input-error1').val() == ''){
    //まだエラーメッセージが出力されていなければ、背景色を長くする
    if($('.js-is-error--text-input1').text() == ''){
    alert('通った');
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    // inputに文字が入っていなければ、必須項目と出るようにする。
    // spanタグ
    $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要

    checkform = false; // var省略
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-input1').text() != ''){
    alert('通った2');
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
    }
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input1').text(''); // spanタグ
    }
    // 以下input二つ目
    // inputタグ
    if($('.js-is-input-error2').val() == ''){
    // inputに文字が入っていなければ、必須項目と出るようにする。
    $('.js-is-error--text-input2').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
    checkform = false; // var省略
    }else{
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input2').text(''); // spanタグ
    }
    // 以下textarea
    if($('.js-is-error-body').val() == ''){
    $('.js-is-error--text-texarea').text('必須項目です').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    checkform = false;
    }else{
    $('.js-is-error--text-texarea').text(''); // spanタグ
    }
    // return checkform(変数 )(テキストが入っている場合はture、入っていない場合はfalseが変数に入る。)
    // return checkform;は変数の指定位置までもどる。checkform変数に戻ってくださいということ。
    // return false;の場合は、送信ボタンが実行されないようにしている。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    //$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
    return checkform;
    });
    });


    を使ったところ、今度は連打すると大きくなり続けます。

    キャンセル

  • 2016/12/21 13:31

    回答のjavascriptを修正しました。(お名前、メール、コメントそれぞれに判定を入れました。(本当は共通の処理なので切り出しても良いと思いますが…)
    キモはここ↓です。
    //まだエラーメッセージが出力されていなければ、背景色を長くする
    if($('.js-is-error--text-input1').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    }

    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-input1').text() != ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
    }

    高さを調整する書き方も間違っていたっぽいですね。

    キャンセル

  • 2016/12/21 13:33

    何度も大変ありがとうございます。
    ただ本当に恐縮なのですが、やはり私の環境ですと連打の問題はなくなった物の、今度は背景の高さが変わらなくなりました。
    そちらでは変化しますか?

    >>>>
    //お問い合わせフォームチェック
    $(function(){
    $('#js-error-inquiry').submit(function(){
    var checkform = true;
    // 以下input一つ目
    // inputタグ
    if($('.js-is-input-error1').val() == ''){
    //まだエラーメッセージが出力されていなければ、背景色を長くする
    if($('.js-is-error--text-input1').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    }
    // inputに文字が入っていなければ、必須項目と出るようにする。
    // spanタグ
    $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    checkform = false; // var省略
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-input1').text() != ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
    }
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input1').text(''); // spanタグ
    }
    // 以下input二つ目
    // inputタグ
    if($('.js-is-input-error2').val() == ''){
    if($('.js-is-error--text-input2').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    }
    // inputに文字が入っていなければ、必須項目と出るようにする。
    $('.js-is-error--text-input2').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要

    checkform = false; // var省略
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-input2').text() != ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
    }
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input2').text(''); // spanタグ
    }
    // 以下textarea
    if($('.js-is-error-body').val() == ''){
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-texarea').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    }
    $('.js-is-error--text-texarea').text('必須項目です').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    checkform = false;
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-texarea').text() != ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
    }
    $('.js-is-error--text-texarea').text(''); // spanタグ
    }
    // return checkform(変数 )(テキストが入っている場合はture、入っていない場合はfalseが変数に入る。)
    // return checkform;は変数の指定位置までもどる。checkform変数に戻ってくださいということ。
    // return false;の場合は、送信ボタンが実行されないようにしている。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    //$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
    return checkform;
    });
    });

    キャンセル

  • 2016/12/21 13:44

    変化しますね…ブラウザのデバッガで見ると初期表示が
    <section id="js-height-adjustment" class="inquiry">ですが、エラー発生時には

    <section id="js-height-adjustment" class="inquiry" style="height: ~em;">
    となり、~の部分がエラーの個数によって変化します。
    これで高さが変わっているのだと思いますが…

    キャンセル

  • 2016/12/21 13:58

    #js-height-adjustmentの高さに変化は起きているのですね。
    上記をそのままコピペしたのですが、
    検証してみます。

    キャンセル

  • 2016/12/21 14:37

    https://codepen.io/anon/pen/bBxqjR
    に再現しましたが、submitを押すと送られてしまい確認ができません。
    送られないようにする方法があれば改善しますが、
    $('#js-height-adjustment').css('height','+=1000px');
    としてもやはり背景の高さに変化がないような気がします。

    キャンセル

  • 2016/12/21 14:46

    if($('.js-is-error--text-input1').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    // $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    var ggg = $('#js-height-adjustment').css('height','+=1000px');

    window.alert(JSON.stringify(ggg));
    }


    上記のようにしたところ、一瞬縦の高さがプラスされますが、送信されるようになってしまいました。

    キャンセル

  • 2016/12/21 14:47

    if($('.js-is-error--text-input1').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    // $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    var ggg = $('#js-height-adjustment').css('height','+=1000px');

    window.alert(ggg);


    上記のようにして高さを加える計算の中身を確認しようとするとobject Objedtになります。
    よって上記のように変更してみた次第です。

    キャンセル

  • 2016/12/21 15:16 編集

    https://codepen.io/anon/pen/bBxqjRについて
    codepenでjqueryが有効ではなかったのでエラーが出ていないのだと思います。使い方も念のためキャプチャしたので回答を参照して下さい。

    キャンセル

  • 2016/12/21 15:24

    ありがとうございます。
    https://codepen.io/anon/pen/bBxqjR

    のようにしました。
    ただsubumitを押して縦幅は伸びていますか?
    私には変わっていない気がします。

    キャンセル

  • 2016/12/21 15:34

    赤い背景、伸びていますよ。heightもついていますし。強いて言うならメールやコメントの書き方が誤っているのでこれらが未入力の場合は伸びないですね。コメントアウトされている$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');を戻せば変わると思いますよ。
    'calc(heightGet + px + 1em)'では1em加算はされませんね。

    キャンセル

  • 2016/12/21 16:04

    https://codepen.io/anon/pen/bBxqjR

    上記のようにしましたが、やはり、赤い部分は増加していないように見えます。
    まだ間違っていますか?

    キャンセル

  • 2016/12/21 16:49

    すいません。jqueryで伸ばしているのはinquiry(画像を伸ばしたい、との事)なので、赤い部分は伸びないです。
    赤い部分はあくまでjs-height-adjustmentなので…
    赤い部分を伸ばすなら$('#js-height-adjustment').css('height', heightGet + 'px').css('height','+=1em');です。

    出来ればコピペだけではなく、ソースの意味をもう少し見て頂けるとありがたいのですが…

    キャンセル

  • 2016/12/21 17:41

    結局うまくお伝えできていなかったようですね。
    実は初めから私が行いたかったのは、赤い部分
    つまりhtmlでいう一番初めのタグ
    <section id="js-height-adjustment" class="inquiry">
    の縦幅をsubmit時に大きくしたいということでした。

    ただ
    $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    も結局同じタグではないですか?

    うまくお伝えできなかった問題はありますが、理解不足の問題ではないと思いますが、

    キャンセル

  • 2016/12/21 17:42

    赤い部分は増加していないように見えます。と言っていますよね。

    キャンセル

  • 2016/12/21 18:25

    すいません。一度、リセットさせて下さい。先ずは、回答にhtml全体を貼りました。これをコピペして、エラーの時は赤い部分が大きくなり、連打しても伸び続けない事を確認出来ますか?

    キャンセル

  • 2016/12/21 22:33

    確かに下記はうまくいきました。
    http://codepen.io/anon/pen/mOooWe

    ですが、下記に同じJSを入れてもうまくいかないのはなぜでしょうか?
    https://codepen.io/anon/pen/bBxqjR

    キャンセル

  • 2016/12/22 09:26

    ありがとうございました。
    //お問い合わせフォームチェック
    $(function(){
    $('#js-error-inquiry').submit(function(){
    var checkform = true;
    // 以下input一つ目
    // inputタグ
    if($('.js-is-input-error1').val() == ''){
    //まだエラーメッセージが出力されていなければ、背景色を長くする
    if($('.js-is-error--text-input1').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    //$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    $('#js-height-adjustment').css('height', heightGet + 'px').css('height','+=20em');
    }
    // inputに文字が入っていなければ、必須項目と出るようにする。
    // spanタグ
    $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    checkform = false; // var省略
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-input1').text() != ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
    }
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input1').text(''); // spanタグ
    }
    return checkform;
    });
    });

    と20emにしたところ変化を確認できました。
    おそらくpaddingの上下で隙間ができているので1emではほとんど変化を感じなかったのが原因だったのだと思います。

    キャンセル

  • 2016/12/22 11:03

    結局前のソースのどこに問題があったのでしょうか?

    if($('.js-is-error--text-input1').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    //$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    $('#js-height-adjustment').css('height', heightGet + 'px').css('height','+=20em');
    }
    をコピペしてもうまくいきません。
    .css('height','+=20em');
    の部分以外にどこに問題があったのでしょうか?

    キャンセル

  • 2016/12/22 11:53

    うまくいったソースをうまくいかなかったソースに組み入れてみたのですが、
    なぜか組み込むと、縦幅が増えなくなってしまいます。

    //お問い合わせフォームチェック
    $(function(){
    $('#js-error-inquiry').submit(function(){
    var checkform = true;
    // 以下input一つ目
    // inputタグ
    if($('.js-is-input-error1').val() == ''){
    //まだエラーメッセージが出力されていなければ、背景色を長くする
    if($('.js-is-error--text-input1').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    //$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    $('#js-height-adjustment').css('height', heightGet + 'px').css('height','+=2000em');
    }
    // inputに文字が入っていなければ、必須項目と出るようにする。
    // spanタグ
    $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    checkform = false; // var省略
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-input1').text() != ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
    }
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input1').text(''); // spanタグ
    }
    // 以下input二つ目
    // inputタグ
    if($('.js-is-input-error2').val() == ''){
    if($('.js-is-error--text-input2').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    // $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
    }
    // inputに文字が入っていなければ、必須項目と出るようにする。
    $('.js-is-error--text-input2').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要

    checkform = false; // var省略
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-input2').text() != ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
    }
    // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
    $('.js-is-error--text-input2').text(''); // spanタグ
    }
    // 以下textarea
    if($('.js-is-error-body').val() == ''){
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-texarea').text() == ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    // $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
    $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
    }
    $('.js-is-error--text-texarea').text('必須項目です').text('必須項目です').css({'color': 'red',
    'text-shadow': '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '0px 0px 10px #fff,'+
    '2px 2px 2px #fff'}); // +改行を可能にするために必要
    checkform = false;
    }else{
    //既にエラーメッセージがあった場合は背景色の長さを元に戻す
    if($('.js-is-error--text-texarea').text() != ''){
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
    }
    $('.js-is-error--text-texarea').text(''); // spanタグ
    }
    // return checkform(変数 )(テキストが入っている場合はture、入っていない場合はfalseが変数に入る。)
    // return checkform;は変数の指定位置までもどる。checkform変数に戻ってくださいということ。
    // return false;の場合は、送信ボタンが実行されないようにしている。
    var heightGet = $('#js-height-adjustment').height(); // sectionタグ
    //$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
    return checkform;
    });
    });

    キャンセル

  • 2016/12/22 17:22

    その後どうでしょうか?
    再質問にした方が良いでしょうか?
    あとは組み込むことだけ成功すればおしまいなのでお願い致します。

    キャンセル

  • 2016/12/23 19:20 編集

    すいません。現在、クリスマス休暇中で26日まで実機を触れないのでその後に確認とさせてください。宜しくお願い致します。

    キャンセル

  • 2016/12/24 14:06

    ありがとうございました。
    その後、3つすべてに適応したところうまくいきました。
    なぜ一つないしは二つだけ適応すると全く背景画像が大きくならなかったのかという理由はわかりませんが、おかげさまで結果は出ました。

    キャンセル

  • 2016/12/24 14:08

    ただ下記の部分がなぜ二つプロパティが必要で'height': heightGet + 'em'だけではだめなのでしょうか?
    $('#js-height-adjustment').css({'height': heightGet + 'px',
    'height':'+=30em'})


    javascript em pxとググってもあまり情報がありません。
    px以外は上記のように二重に書かないといけない仕様なので消化?

    キャンセル

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

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

関連した質問

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

  • JavaScript

    15880questions

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

  • jQuery

    6523questions

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

  • トップ
  • JavaScriptに関する質問
  • ボタンを押したときにJSが実行されるが、その後連打しても内容が変わらない限り、実行されないようにできないのでしょうか?