Estoy usando JavaScript para verificar Validar. Los elementos de entrada anteriores que uso son necesarios para verificar la validación. En la sección del banco de cheques del campo de la casilla de verificación, he usado JavaScript para verificar la validación del formulario. ¿Cómo muestro un mensaje cuando se completa la validación? He probado varias soluciones pero parece que no funciona. este es mi codigo
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>