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

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

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

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

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

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

$('#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プラスされるとできませんか？

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

html
1<html>
2  <head>
3    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
4    <script>
5    //お問い合わせフォームチェック
6    $(function(){
7      $('#js-error-inquiry').submit(function(){
8        //エラーの初期化
9        $("p.error").remove();
10        $("dl dd").removeClass("error");
11        var checkform = true;
12        $(":text,textarea").filter(".validate").each(function(){
13          //必須項目のチェック
14          $(this).filter(".required").each(function(){
15            if($(this).val()==""){
16              $(this).parent().prepend("<p class='error'>必須項目です</p>")
17              $("p.error").parent().addClass("error");
18              checkform = false;
19            }
20          });
21        })
22        return checkform;
23      });
24    });
25    </script>
26    <style type="text/css">
27      form {background-color:green;}
28      dl dd p.error{
29        margin:0;
30        color:red;
31        font-weight:bold;
32        margin-bottom:1em;
33      }
34      dl dd.error input {background:#FFCCCC;}
35    </style>
36  </head>
37  <body>
38    <form id="js-error-inquiry" class="inquiry-form" role="form"><!-- action="mail.php" -->
39    <dl>
40      <dd>
41        <input type="text" name="name" size="100" class="validate required" />
42      </dd>
43      <dd>
44        <input type="text" name="name" size="100" class="validate required" />
45      </dd>
46    </dl>
47      <button type="submit">test</button>
48    </form>
49  </body>
50</html>

追記(html全体)

html
1<html>
2  <head>
3    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
4    <script>
5//お問い合わせフォームチェック
6    $(function(){
7$('#js-error-inquiry').submit(function(){
8    var checkform = true;
9    // 以下input一つ目
10    // inputタグ
11    if($('.js-is-input-error1').val() == ''){
12        //まだエラーメッセージが出力されていなければ、背景色を長くする
13        if($('.js-is-error--text-input1').text() == ''){
14          var heightGet = $('#js-height-adjustment').height(); // sectionタグ
15          //$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
16          $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
17        }
18        // inputに文字が入っていなければ、必須項目と出るようにする。
19        // spanタグ
20        $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
21                                                              'text-shadow': '0px 0px 10px #fff,'+
22                                                                             '0px 0px 10px #fff,'+
23                                                                             '0px 0px 10px #fff,'+
24                                                                             '0px 0px 10px #fff,'+
25                                                                             '0px 0px 10px #fff,'+
26                                                                             '0px 0px 10px #fff,'+
27                                                                             '0px 0px 10px #fff,'+
28                                                                             '0px 0px 10px #fff,'+
29                                                                             '0px 0px 10px #fff,'+
30                                                                             '2px 2px 2px #fff'}); // +改行を可能にするために必要
31        checkform = false; // var省略
32    }else{
33        //既にエラーメッセージがあった場合は背景色の長さを元に戻す
34        if($('.js-is-error--text-input1').text() != ''){
35          var heightGet = $('#js-height-adjustment').height(); // sectionタグ
36          $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
37        }
38        // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
39        $('.js-is-error--text-input1').text(''); // spanタグ
40    }
41    return checkform;
42});
43    });
44    </script>
45    <style type="text/css">
46#js-height-adjustment{
47  background-color:red;
48height:500px;
49}
50.inquiry {
51    position: relative;
52    padding: 34rem 0 35.5rem 0;
53    width : 100%;
54    /*background: url(./img/common-img/inquery-back.png) no-repeat;*/
55    background-position: center center;
56    background-size: cover;
57}
58
59@media (min-width: 960px) {
60.inquiry {
61    padding: 53rem 0 28rem 0;
62}
63}
64
65/*入力フォーム一覧の位地*/
66.inquiry-wrap {
67    position: absolute;
68    top: 7.6%;
69    left: 8%;
70}
71
72@media (min-width: 640px) {
73.inquiry-wrap {
74    top: 7.6%;
75    left: 11%;
76}
77}
78
79@media (min-width: 960px) {
80.inquiry-wrap {
81    position: absolute;
82    top: 10.3%;
83    left: 11%;
84}
85}
86
87.heading2_color_white {
88    text-shadow:
89                1px 1px rgba(0, 0, 0, .2),
90                2px 2px rgba(0, 0, 0, .1),
91                3px 3px rgba(0, 0, 0, .1),
92                4px 4px rgba(0, 0, 0, .05),
93                5px 5px rgba(0, 0, 0, .05),
94                6px 6px rgba(0, 0, 0, .05)
95                ;
96}
97
98.heading2_color_white,.inquiry-form dt {
99    color: white;
100}
101
102.inquiry-form dt {
103    text-shadow:
104                0px 0px 10px #fff,
105                0px 0px 10px #fff,
106                0px 0px 10px #fff,
107                0px 0px 10px #fff,
108                0px 0px 10px #fff,
109                0px 0px 10px #fff,
110                0px 0px 10px #fff,
111                0px 0px 10px #fff,
112                0px 0px 10px #fff,
113                2px 2px 2px rgba(0,0,0,.9);
114    color: #000;
115    font-weight: bold;
116}
117
118/*フォーム～ボタンまでの横幅、行間一括指定、個人情報ボックス以外*/
119.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
120    width: 90%;
121    height: 1.8em;
122    line-height: 1.8;
123    border-style: none;/*選択時の枠線を無くす*/
124}
125
126@media (min-width: 960px) {
127.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
128    width: 40%;
129}
130}
131
132.inquiry-form__input-box,.inquiry-form__input-box_kind_textarea {
133    opacity: 0.7;
134}
135
136.inquiry-form__input-box {
137    margin-bottom: 1rem;
138}
139
140.inquiry-form__input-box_kind_textarea .inquiry-form__body {
141    margin-bottom: 2rem;
142    resize: horizontal;/*横のみリサイズ可能*/
143}
144
145/* コメントボックスの高さ */
146.inquiry-form__body {
147    height: 7rem;
148}
149
150@media (min-width: 960px) {
151.inquiry-form__body {
152    height: 10rem;
153}
154}
155/* /コメントボックスの高さ */
156
157.inquiry-form__privacy {
158    border: 0.1rem solid #03AFFF;
159    width: 78%;
160    padding: 2.3rem 3rem 0 3rem;
161    height: 12rem;
162    line-height: 2;
163    overflow-y: scroll;
164    background: #fff;
165    opacity: 0.7;
166}
167
168@media (min-width: 960px) {
169.inquiry-form__privacy {
170    width: 37%;
171}
172}
173
174.inquiry-form__primary-btn {
175    display: block;
176    margin-top: 4rem;
177    height: 5.5rem;
178    background: rgb(0, 239, 123);
179    color: #fff;
180    font-size: 2.7rem;
181    font-weight: bold;
182    letter-spacing: 2px;
183    line-height: 5.5rem;
184    text-align: center;
185    text-shadow: 1px 1px 0px #000,
186                 -1px 1px 0px #000,
187                 1px -1px 0px #000,
188                 -1px -1px 0px #000;
189    box-shadow: 2px 2px 2px rgba(0,0,0,.9);
190}
191form {background-color:green;}
192    </style>
193  </head>
194  <body>
195<section id="js-height-adjustment" class="inquiry">
196					<div class="inquiry-wrap"><!-- コンタクトの要素をまとめてポジションで移動するため -->
197						<h2 id="js-inquiry" class="heading2_color_white heading2">CONTACT</h2>
198						<form id="js-error-inquiry" class="inquiry-form"  method="post" role="form"><!-- action="mail.php" -->
199							<dl>
200							    <dt>
201							    	<label for="name">お名前&nbsp;(必須)</label>
202							    </dt>
203							    <span class="js-is-error--text-input1"></span>
204							    <dd class="inquiry-form__input-box">
205							    	<input id="name" class="js-is-input-error1" name="name" onclick=””></dd>
206							<button class="inquiry-form__primary-btn js-fadein-from-bottom
207animation-hover action-hover" type="submit">ご相談完了</button>
208						</form>
209					</div><!-- /.inquiry-wrap -->
210				</section><!-- /#about -->
211  </body>
212</html>

投稿2016/12/16 04:04

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

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

関連した質問