「jquery.jpostal.js」で自動入力された値に反応して特定要素のテキスト変更とクラスの付与をしたい

前提・実現したいこと

「jquery.jpostal.js」を使用して問い合わせフォームを作成中です。
各項目に「必須」のアイコンを表示してあり、入力をするとその内容が「必須」から「OK」に変更し同時に「ok」というクラスを付与したいのです。

普通にキーボードで入力する分には、changeまたはblurで判定できるのですが、自動入力されたものについてはそれらが機能しないようです。
どうかご指導のほどよろしくお願い致します。

該当のソースコード

####HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
</head>
<body>
<form>
	<table>
		<tr>
			<th rowspan="6" scope="row">ご住所</th>
			<th>郵便番号 （半角数字）<span class="indis zip">必須</span></th>
			<td>〒
				<input type="text" id="zip1" name="zip1" id="zip1" class="validate[required,custom[number]]">
				-
				<input type="text" id="zip2" name="zip2" id="zip2" class="validate[required,custom[number]]">
				<input type="button" id="btn" name="btn" value="郵便番号から検索"></td>
		</tr>
		<tr>
			<th>都道府県<span class="indis pref">必須</span></th>
			<td><select id="pref" name="pref" class="validate[required]">
					<option value="">お選び下さい▼</option>
					<option value="北海道">北海道</option>
					<option value="青森県">青森県</option>
					<option value="岩手県">岩手県</option>
					<option value="宮城県">宮城県</option>
					<option value="秋田県">秋田県</option>
					<option value="山形県">山形県</option>
					<option value="福島県">福島県</option>
					<option value="茨城県">茨城県</option>
					<option value="栃木県">栃木県</option>
					<option value="群馬県">群馬県</option>
					<option value="埼玉県">埼玉県</option>
					<option value="千葉県">千葉県</option>
					<option value="東京都">東京都</option>
					<option value="神奈川県">神奈川県</option>
					<option value="新潟県">新潟県</option>
					<option value="富山県">富山県</option>
					<option value="石川県">石川県</option>
					<option value="福井県">福井県</option>
					<option value="山梨県">山梨県</option>
					<option value="長野県">長野県</option>
					<option value="岐阜県">岐阜県</option>
					<option value="静岡県">静岡県</option>
					<option value="愛知県">愛知県</option>
					<option value="三重県">三重県</option>
					<option value="滋賀県">滋賀県</option>
					<option value="京都府">京都府</option>
					<option value="大阪府">大阪府</option>
					<option value="兵庫県">兵庫県</option>
					<option value="奈良県">奈良県</option>
					<option value="和歌山県">和歌山県</option>
					<option value="鳥取県">鳥取県</option>
					<option value="島根県">島根県</option>
					<option value="岡山県">岡山県</option>
					<option value="広島県">広島県</option>
					<option value="山口県">山口県</option>
					<option value="徳島県">徳島県</option>
					<option value="香川県">香川県</option>
					<option value="愛媛県">愛媛県</option>
					<option value="高知県">高知県</option>
					<option value="福岡県">福岡県</option>
					<option value="佐賀県">佐賀県</option>
					<option value="長崎県">長崎県</option>
					<option value="熊本県">熊本県</option>
					<option value="大分県">大分県</option>
					<option value="宮崎県">宮崎県</option>
					<option value="鹿児島県">鹿児島県</option>
					<option value="沖縄県">沖縄県</option>
				</select></td>
		</tr>
		<tr>
			<th>市区町村名<span class="indis address">必須</span></th>
			<td><input type="text" id="address" name="address" class="validate[required]"></td>
		</tr>
	</table>
</form>
<script
src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script> 
<script src="https://jpostal-1006.appspot.com/jquery.jpostal.js"></script>
</body>
</html>

jquery

// jquery.jpostal.js
$(function () {
	$('#zip').jpostal({
		click: '#btn',
		postcode: [
			'#zip1',
			'#zip2'
		],
		address: {
			'#pref': '%3',
			'#address': '%4',
			'#address2': '%5'
		}
	});
});

// 郵便番号
$("#zip1,#zip2").change(function () {
	if ($("#zip1").val() == "" || $("#zip2").val() == "") {
		$('.indis.zip').html("必須");
		$('.indis.zip').removeClass("ok");
		return true;
	} else {
		$('.indis.zip').html("OK");
		$('.indis.zip').addClass("ok");
	}
});

// 都道府県
$("#pref").change(function () {
	if ($("#pref").val() == "") {
		$('.indis.pref').html("必須");
		$('.indis.pref').removeClass("ok");
		return true;
	} else {
		$('.indis.pref').html("OK");
		$('.indis.pref').addClass("ok");
	}
});

// 市区町村名
$("#address").blur(function () {
	if ($(this).val() == "") {
		$('.indis.address').html("必須");
		$('.indis.address').removeClass("ok");
		return true;
	} else {
		$('.indis.address').html("OK");
		$('.indis.address').addClass("ok");
	}
});

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

回答2件

ベストアンサー

trigger オプションで change が trigger() されます。

JavaScript
1        trigger: {
2            '#pref': true,
3            '#address': true
4        }

https://github.com/ninton/jquery.jpostal.js/issues/20
https://github.com/ninton/jquery.jpostal.js/blob/master/sample_1.html

336行目

JavaScript
1Jpostal.Jpostal.prototype.trigger = function (i_key) {
2    "use strict";
3
4    if (this.options.trigger === undefined || this.options.trigger[i_key] === undefined || this.options.trigger[i_key] === false) {
5        return;
6    }
7    $(i_key).trigger("change");
8};

投稿2019/10/07 07:27

x_x

総合スコア13749

defg

2019/10/07 23:29

ありがとうございました。難なく解決致しました。

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

参考になれば幸いです。
HTMLInputElement.value を監視する - Qiita
JavaScript - yubinbago.js で住所取得を検知したい｜teratail

投稿2019/10/07 03:53

Lhankor_Mhy

総合スコア36928

defg

2019/10/07 23:30

ありがとうございます。すみません。スキルがなく私には理解できませんでした。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

「jquery.jpostal.js」で自動入力された値に反応して特定要素のテキスト変更とクラスの付与をしたい

前提・実現したいこと

該当のソースコード

jquery

関連した質問