チェック検証終わった後どうやってアラームメッセージ設定する？
Q&A
チェック検証してからアラーム表示したい。
今お客様に向けるフォーム作成します。チェック検証[Check validate]のところ問題を発生しております。
やりたいことはチェック検証「check validate」してからポップアップメッセージ設定したい。
どうすればいいですか？
function checkbox() {
if (document.getElementById("tab-1").checked) {
document.getElementById("myCheck").required = true;
document.getElementById("deadline").required = true;
document.getElementById("Desired_payment_date").required = true;
document.getElementById("Bank_transfer_destination").required = true;
return false;
} else if (document.getElementById("tab-2").checked) {
document.getElementById("myCheck").required = false;
document.getElementById("AccountTransfer").required = true;
return false;
}
return true;
}
function done(){
if(checkbox()==true){
alert("done")
}
}
<table class="table table-borderless">
<thead>
<tr >
<th scope="col" style="font-size:24px"><input type="checkbox" id="tab-1" name="one" value="✔" style="height:20px;width:20px;margin-right:10px;" ><span id="銀行振込">銀行振込</span></th>
<th scope="col" style="font-size:24px"><input type="checkbox" id="tab-2" name="two" value="✔"style="height:20px;width:20px;margin-right:10px;" ><span id="口座振替">口座振替</span></th>
</tr>
<script>
$(document).ready(function(){
$("#tab-1").click(function(){
$("#tab-2").prop("checked", false);
$("#銀行振込").css("color", "#44aa00");
$("#銀行振込").css("text-decoration", "underline #44aa00");
$("#口座振替").css("color", "black");
$("#口座振替").css("text-decoration", "none ");
});
$("#tab-2").click(function(){
$("#tab-1").prop("checked", false);
$("#口座振替").css("color", "#44aa00");
$("#銀行振込").css("color", "black");
$("#口座振替").css("text-decoration", "underline #44aa00");
$("#銀行振込").css("text-decoration", "none ");
});
});
</script>
</script>
</thead>
<tbody>
<tr>
<th scope="row">
<p>
<label for=""> 締切日 </label>
<select class="" name="deadline" id="deadline" class="form-select" style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;" >
<option value="" selected></option>
<option value="20日">20日</option>
<option value="末日">末日</option>
</select>
</p>
<p>
<label for="">希望支払日 </label>
<select class="Desired_payment_date" id="Desired_payment_date" name="Desired_payment_date" style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;" >
<option value="" selected></option>
<option value="20日">20日</option>
<option value="21日">21日</option>
<option value="22日">22日</option>
<option value="23日">23日</option>
<option value="24日">24日</option>
<option value="25日">25日</option>
<option value="26日">26日</option>
<option value="27日">27日</option>
<option value="28日">28日</option>
<option value="29日">29日</option>
<option value="末">末</option>
</select>
</p>
<p>
<label for="">口座名 </label>
<select class="bank" name="Bank_transfer_destination" id="Bank_transfer_destination" style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;">
<option value="" selected></option>
<option value="福井銀行">福井銀行</option>
<option value="北陸銀行">北陸銀行</option>
<option value="敦賀信用金庫">敦賀信用金庫</option>
<option value="商工中金">商工中金</option>
<option value="滋賀銀行">滋賀銀行</option>
<option value="三菱UFG銀行">三菱UFJ銀行</option>
</select>
</p>
<label style="font-weight:bold;font-size: 20px;"><input type="checkbox" style="height:20px;width:20px;margin-right:10px;" class="form-check-input" id="flexCheckChecked" id="myCheck" name="Checkbox_value" value="✔振込手数料の負担に同意します。"> 振込手数料の負担に同意します。</label>
</th>
<td>
<p >
<label for="">締切日</label>
<select class="" name="AccountTransfer" id="AccountTransfer" style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;" >
<option value="" selected></option>
<option value="20日">20日</option>
<option value="末日">末日</option>
</select>
</p>
<label style="font-weight:bold; color: black;">引落日：翌月27日(固定)</label><br>
<label style="font-weight:normal; color: red;">※振替日が休日の場合は、翌営業日となります。</label><br>
<label style="font-weight:normal; color: red;">※営業日とは、金融機関窓口営業日です。</label><br>
<label style="font-weight:normal; color: red;">※全国の金融機関がご利用できます。</label><br>
<label style="font-weight:normal; color: red;"><span>※講座振替の場合は、手数料のご負担は</span></label><br><br>
</td>
</tr>
</tr>
</tbody>
</table>
自分で試したこと
自分挑戦したことはfunction checkbox()=> return true
つぎは新し function done(){} を作成しました。
function done(){
if(checkbox()==true){
alert("done")}
}
効果がなかったんです。
皆さん助けて!!!!
0
