ナレッジサイト
ログイン
初ログインの方には初期パスワードを変更するようにしています。 その際に、 初期パスワードで 11111111 初期パスワード（確認用）で 22222222 など一致しなかったとき、エラーなど起きずにそのまま送信が押せてしまいます。 添付画像のように、差し替えキーワードがむき出しの画面になります。 送信する際に、一致しなかったときはエラー画面を表示させたいです。 そしてエラーの際は 初期パスワードの入力した値はリセットされないようにしたいです。
<body class="body"> <center> <div class="main"> <div class="page-title"> <p>還付金送金口座の登録・<br class="sp">修正のお手続き / 還付金明細の確認</p> </div> <div class="body_tbl"> <div class="container"> <p class="c-txt">初期パスワードを変更してください。</p> <div class="c-form"> <form method="post" action="/regist/Reg2"> <div class="smp_tmpl"> <dl class="cf"> <dt class="title">新規パスワード</dt> <dt class="c-note">半角英数字混合で８桁以上</dt> <dd class="data"><input class="input smp-password" type="password" name="password" value=""><span class="smp-password-toggle" aria-hidden="true"></span><br> </dd> </dl> <dl class="cf"> <dt class="title">新規パスワード（確認用）</dt> <dt class="c-note">半角英数字混合で８桁以上</dt> <dd class="data"><input class="input smp-password" type="password" name="password:cf" value=""><span class="smp-password-toggle" aria-hidden="true"></span><br> </dd> </dl> <input type="hidden" name="detect" value="判定"> <!-- 管理ID --> <input type="hidden" name="SMPFORM" value="%smpform:update-pass%"> <input type="hidden" name="id" value="%val:sys:id%"> <input type="hidden" name="authKey" value="%val:usr:authKey%"> <input type="hidden" name="insuredNum" value="%val:usr:insuredNum%"> <input type="hidden" name="updatepw" value="2"> %form:extension:update-pass% <input class="submit" type="submit" name="submit" value="変更する">%area:hidden:rereg% </div> </form> </div> </div> </div> <div class="footer"> <p class="c-copyright">Copyright ©</p> </div> </div> </center>
<script>
(function () {
// $(".submit").attr('disabled', true);
document.getElementsByClassName("submit")[[0]].disabled = true;
var inputs = document.querySelectorAll('#SMP_STYLE .smp-password');
var toggles = document.querySelectorAll('#SMP_STYLE .smp-password-toggle');
if (!inputs.length || !toggles.length) return;
toggles.forEach(function (toggle, index) {
var input = inputs[index];
if (!input || !toggle) return;
toggle.addEventListener('click', function () {
var isPassword = input.type === 'password';
input.type = isPassword ? 'text' : 'password';
toggle.classList.toggle('is-visible');
});
});
var passwordInputs = document.getElementsByClassName("smp-password");
var passwordLength = true;
for (var i = 0; i < passwordInputs.length; i++) {
passwordInputs[i].addEventListener("input", function () {
document.getElementsByClassName("submit")[[0]].disabled = true;
});
passwordInputs[i].addEventListener("change", function () {
if (this.value.length >= 9) {
alert("パスワードは8桁で入力してください");
}
checkInput(this.value.length);
});
}
function checkInput(){
for (var i = 0; i < passwordInputs.length; i++) {
console.log(passwordInputs[i].value.length);
if(passwordInputs[i].value.length >= 9) passwordLength = false;
}
if(passwordLength) {
document.getElementsByClassName("submit")[[0]].disabled = false;
}
passwordLength = true;
}
})();
</script>
</body>コメント
お問合せいただきありがとうございます。 エラーの際に画像のようにタグがそのまま表示されてしまうのは マイエリア設置用のHTMLを入力ページに設定しているためになります。 マイエリアのカスタムページに設置する入力ページとフォームの 入力ページに設定するページは見た目は似ていますが、それぞれ別のページに なりますので、フォームの入力ページ用にHTMLを作成ください。 フォームの入力ページにある、「入力ページ用HTML」の「設定デザイン」 ボタンより、入力ページのデフォルトのHTMLがダウンロードできますので、 そのページを元に作成ください。 こちらは入力のエラーや確認ページから戻った場合のページとして動作いたします。 ◯カスタムページの特徴 ・valueなど登録済みのデータやIDを呼び出す部分に%val:usr:XXXX%と差し替えキーワードを使用する。 ◯フォームの入力ページの特徴 ・valueなど送信された値を保持する機能として$XXXX$と差し替えキーワードを使用する。 ・エラーメッセージを各項目に設定する。 ▼フォームの各種HTMLソースに関する解説を知りたい https://support.smp.ne.jp/faq/f22796/ 入力ページをご設定いただければ差し替えキーワードは剥き出しにならず、 エラーメッセージが表示されます。 パスワードも「設定デザイン」のHTMLに合わせてvalueを設定いただければ 入力した値が保持され、また確認用途不一致の場合は「確認入力と一致しません」など、確認エラーメッセージに設定いただいたエラーメッセージが表示されます。 ご確認よろしくお願いいたします。
画像です。
-
いいね
2026年3月17日(火)