I am using JavaScript to check Validate. The above input items I use required to check validate. In the check bank section of the checkbox field I have used JavaScript to check validation of the form . How do I show a message when the validation is complete? I have tried several solutions but it doesn't seem to work. This is my code
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, tr, th,td {
border: 2px solid #dfd7ca;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="銀行振込">Bank transfer</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="口座振替">Account transfer</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=""> deadline </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="30">30</option>
</select>
</p>
<p>
<label for="">Desired payment date </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>
</select>
</p>
<p>
<label for="">Bank </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="福井銀行">A</option>
<option value="北陸銀行">B</option>
<option value="敦賀信用金庫">C</option>
<option value="商工中金">D</option>
<option value="滋賀銀行">E</option>
<option value="三菱UFG銀行">F</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="✔振込手数料の負担に同意します。">
I agree to bear the transfer fee.。</label>
</th>
<td>
<p >
<label for="">Deadline</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>
</td>
</tr>
</tr>
</tbody>
</table>
<button onclick="checkbox()" id="btn" type="submit" name="input" class="btn btn-primary btn-block">Send</button>