How to show a message after check validate of checkbox button?-CodePudding

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 >
   <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  name="deadline" id="deadline"   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  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  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;" 　  　id="flexCheckChecked"  id="myCheck" name="Checkbox_value"  value="✔振込手数料の負担に同意します。"> 
            I agree to bear the transfer fee.。</label>
         </th>
         <td>
            <p >
               <label for="">Deadline</label>  
               <select  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" >Send</button>

CodePudding user response：

You can check the DOM attribute select.options.selectedIndex to check if the <select> elements are selected.

let button = document.getElementById('btn');
let deadline = document.getElementById("deadline");
let desiredPD = document.getElementById("Desired_payment_date");
let bankTD = document.getElementById("Bank_transfer_destination");
let myCkeck = document.getElementById("myCheck");
let accountT = document.getElementById("AccountTransfer");

/* In this solution, when the button is clicked, <form> control is done. */
button.addEventListener('click', function(event) {
  if(isValid()){
    alert("done");
  }
  else{
    alert("failed");
  }
});

/* This method returns true if validation is successful. */
function isValid() 
{
  if (document.getElementById("tab-1").checked) {
    let result = (deadline.selectedIndex != 0) ? true : false;
    result &= (deadline.selectedIndex != 0) ? true : false;
    result &= (desiredPD.selectedIndex != 0) ? true : false;
    result &= (bankTD.selectedIndex != 0) ? true : false;
    result &= (myCkeck.selectedIndex != 0) ? true : false;
    return result;
  } 
  else if (document.getElementById("tab-2").checked) {
    return (accountT.selectedIndex != 0) ? true : false;
  }
  else
    return false;
}

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 >
    <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  name="deadline" id="deadline"   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  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  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;" 　  id="myCheck" name="Checkbox_value"  value="✔振込手数料の負担に同意します。"> 
                I agree to bear the transfer fee.。</label>
            </th>
            <td>
                <p >
                    <label for="">Deadline</label>  
                    <select  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 id="btn" type="submit" name="input" >Send</button>