jQuery(メールフォームの入力チェック)選択後の文字数制限を作りたいです。

前提・実現したいこと

mailform-v7.1というhttps://www.1-firststep.com/archives/462
こちらのサイトで配布されているプログラムをカスタム中です。

問い合わせフォームにて、selectにて選んだものを次のテキストエリアで文字数制限をかけ指定文字数以外の場合はエラーを表示としたいです。
jsやった事がなく、迷走したモノを作っているかもしれませんがもしよかったら教えて貰いたいです。

無料とはいえ配布されているモノのカスタマイズなのでJavaScriptは抜粋のモノとなります。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

【フォーム側】

html
1
2<form action="php/mailform.php" method="post" id="mail_form">
3	<dl>
4
5		<dt>端末<span>terminal</span></dt>
6		<dd>
7			<select id="terminal" name="terminal">
8				<option value="">選択してください</option>
9				<option value="windows">windows</option>
10				<option value="iphone">iphone</option>
11				<option value="android">android</option>
12			</select>
13		</dd>
14
15		<dt>番号<span>Settlement Number</span></dt>
16		<dd><input type="text" id="S_number" name="S_number" value="" onkeyup="ShowLength(value);" /></dd>
17	</dl>
18
19	<p id="form_submit"><input type="button" id="form_submit_button" value="送信する" /></p>
20</form>
21

【js側】

jQuery/js
1	if( $('[name=terminal]').change(function())) {
2	var terminal = $('[name=terminal]').change(function());
3	var element = $('[name="S_number"]').val();
4		switch ( terminal ) {
5		case 'windows':
6				if(element.length != 13 ){
7				element.parents( 'dd' ).find( 'span.error_match' ).text( '再度ご確認下さい' );
8				error++;
9				scroll_point = compare_method( scroll_point, element.offset().top );
10				break;
11					}
12				else {
13				element.parents( 'dd' ).find( 'span.error_match' ).text( '' );
14				break;
15					}
16		case 'iphone':
17				if(element.length != 10 ){
18				element.parents( 'dd' ).find( 'span.error_match' ).text( '再度ご確認下さい' );
19				error++;
20				scroll_point = compare_method( scroll_point, element.offset().top );
21				break;
22					}
23				else {
24				element.parents( 'dd' ).find( 'span.error_match' ).text( '' );
25				break;
26					}
27		case 'android':
28				if(element.length != 15 ){ 
29				element.parents( 'dd' ).find( 'span.error_match' ).text( '再度ご確認下さい' );
30				error++;
31				scroll_point = compare_method( scroll_point, element.offset().top );
32				break;
33					}
34				else {
35				element.parents( 'dd' ).find( 'span.error_match' ).text( '' );
36				break;
37					}
38		default:
39				element.parents( 'dd' ).find( 'span.error_match' ).text( '' );
40		}
41	}
42}
43

試したこと

色んなサイトを参考にしてif文とかでも作ってみましたが、動作せず…
最初の引数の構文がおかしい気がしますが、わからず…
もはやこの作り方でない方が良い時はバッサリ言って貰えると

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2019/07/05 03:02

（質問文は編集できます）「ファーム」ではなく「フォーム」と表記することが多いと思います。また、質問文のコード（JavaScript/HTML）はそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。あと、JavaScriptは提示されたものだけでしょうか。なるべく全体を提示されたほうが良いと思います。

HiDEKI86122895

2019/07/05 03:26

編集機能有難う御座います。 [ファーム]表記を正しい[フォーム]へ変更合ってるか不安ですが、コードブロックで囲んでみました。 javascriptは掲示部分以外にも沢山ありますが、配布モノのカスタマイズとなり、自分で書いた所以外の記入は、大丈夫なのか不安なので記載しておりません。一応説明分に一文入れさせて頂きました。他にも修正箇所等ありましたらお願い致します。

kei344

2019/07/05 04:41

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在回答されておられる方の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。

HiDEKI86122895

2019/07/05 08:31

すみません！確かにあとでみる方の事を考えていませんでした。。以後気を付けます。。質問等初めてでしたが皆さん優しく、しかもヒントだけでなくほぼほぼ正解を教えて頂き…もっと勉強したいと思います。

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

回答2件

ベストアンサー

動作せず

terminalはselectタグなのにinputとして指定しているからと思います。

次のテキストエリアで文字数制限をかけ指定文字数以外の場合はエラーを表示としたいです。

チェックのタイミングとしては「terminalが選ばれる　且つ　S_numberの入力が確定する」
なので、送信ボタン押下時のほうがチェックタイミングとしては適切に思います。

あと細かいですが、そんなにbreak;置かなくてもいいような・・・。
全てにspan.error_matchを空にする処理を置くのではなく、冒頭で空にしておけば良いのでは・・。

また、どの選択肢でも文字数以外は同じように見受けられるので、
処理をまとめられるように思います。

例１
optionに値持たせる

注記：一応、なるべく正確な表記に・・・

html
1            <select id="terminal" name="terminal">
2                <option value="">選択してください</option>
3                <option value="13">windows</option>
4                <option value="10">iPhone</option>
5                <option value="15">Android</option>
6            </select>

例２
連想配列で対応作る

js
1let check = {"Windows":13,"iPhone":10,"Android":15};

terminalも送信対象であればこちらのほうが良いでしょうね。

※いずれもonkeyupは外しています。

optionに値持たせる

js
1$(function() {
2	$('#form_submit_button').on('click', function() {
3        $('#S_number').parents( 'dd' ).find( 'span.error_match' ).text( '' );
4		let error = 0;
5		if ($('#terminal').val() != '' && $('#S_number').val() != '') {
6			if ($('#S_number').val().length != parseInt($('#terminal').val())) {
7				$('#S_number').parents( 'dd' ).find( 'span.error_match' ).text('再度ご確認下さい');
8				error++;
9				scroll_point = compare_method(scroll_point, $('#terminal').val().offset().top);
10			}
11		}
12	});
13});
14

配列で設定持つ

js
1let checkSetting = {"Windows":13,"iPhone":10,"Android":15};
2$(function() {
3	$('#form_submit_button').on('click', function() {
4		let error = 0;
5		if ($('#terminal').val() != '' && $('#S_number').val() != '') {
6            let checkSize = (checkSetting[$('#terminal').val()])? parseInt(checkSetting[$('#terminal').val()]): "";
7			if (checkSize != "" && $('#S_number').val().length != checkSize) {
8				$('#S_number').parents( 'dd' ).find( 'span.error_match' ).text('再度ご確認下さい');
9				error++;
10				scroll_point = compare_method(scroll_point, $('#terminal').val().offset().top);
11			}
12		}
13	});
14});

※span.error_match　がHTMLとして提示されてないので適当に作って確認したあと戻してます。
「特定の文言だけを置く」のが目的であればparentsとかfindで辿らずidつけて直指定のほうが良いと思います。

投稿2019/07/05 04:35

編集2019/07/05 04:44

m.ts10806

総合スコア80888

HiDEKI86122895

2019/07/05 08:28

そのまま入力では既存のと競合し少し変更が必要でしたがほぼほぼ全部同文でできました。。。。ほぼ全部作り変えとなってしまい申し訳ないです。。でも無事希望通りの動作が行えました。 ifやswithでどう作るしか考えてなかったので配列方法の let checksettingは本当に考えもしなかったです。本当に有難う御座いました。すごく勉強になりました！

m.ts10806

2019/07/05 08:46

やり方はひとつではないですし、まずはきちんと動くものを作るところからと思います。私の提示したコードは「ちゃんと動くけどなんか冗長だな」となったときの”リファクタリング”という作業に近いです。機能を1つ1つきちんと見ていけば不整合な部分とかも気づけると思うので、ポイントで1つずつ見ていってみると良いです。 selectのはずがinputになってしまっているところはポイントを見ていけば気づけると思うので。

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