Validate HTML5 form on making form fields mandatory dynamically

Validate HTML5 form on making form fields mandatory dynamically

I've a bootstrap form which has a few fields. By default, the 1st and the 2nd fields are mandatory.

Now, if the 3rd field is filled out, the 4th one becomes mandatory.
Similarily, if the 4th field is filled out, the 3rd one becomes mandatory.

However, if both 3rd & 4th fields are not filled out, they're not mandatory.
I'm also using the HTML5 form validation here.

So, here if you see, the fields Name & Date of Registration are mandatory by default.
However, I'm trying to make Website mandatory when Company is filled out! And similarly, make Company mandatory, when Website is filled out!
If neither company not website are filled out, both of these fields are not mandatory!

Here's my code :

  1.     <!doctype html>
  2.     <html>
  3.         <head>   
  4.             <meta charset="utf-8">
  5.             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6.             <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  7.             <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  8.             <script>
  9.                 $(document).ready(function(){
  10.                     if(($('#comp').val()!== "") || ($('#weburl').val()!=="")) {
  11.                         $('#comp').prop('required',true);
  12.                         $('#weburl').prop('required',true);
  13.                        
  14.                     }
  15.                     else {
  16.                         $('#comp').prop('required',false);
  17.                         $('#weburl').prop('required',false);
  18.                     }
  19.                     $("#myForm").submit(function(){
  20.                         alert("OK");
  21.                         return false;
  22.                     })
  23.                    
  24.                 });
  25.                
  26.                
  27.             </script>
  28.         </head>
  29.         <body>
  30.             <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button>
  31.        
  32.             <div id="myFormModal" class="modal fade" role="dialog">
  33.               <div class="modal-dialog">
  34.        
  35.                 <div class="modal-content">
  36.                   <div class="modal-header">
  37.                     <button type="button" class="close" data-dismiss="modal">&times;</button>
  38.                     <h4 class="modal-title">Add details</h4>
  39.                   </div>
  40.                   <div class="modal-body">
  41.                     <form class="form-horizontal" id="myForm" name="contact" action="#">
  42.                       <div class="form-group">
  43.                         <label class="control-label col-sm-3" for="dor">Date of Registeration:</label>
  44.                         <div class="col-sm-8">
  45.                           <input type="date" class="form-control" id="dor" name="dor" required>
  46.                         </div>
  47.                       </div>
  48.                       <div class="form-group">
  49.                         <label class="control-label col-sm-3" for="name">Name:</label>
  50.                         <div class="col-sm-8">
  51.                           <input type="text" class="form-control" id="name" name="name" required>
  52.                         </div>
  53.                       </div>
  54.                       <div class="form-group">
  55.                         <label class="control-label col-sm-3" for="comp">Company:</label>
  56.                         <div class="col-sm-8">
  57.                           <input type="text" class="form-control" id="comp" name="comp">
  58.                         </div>
  59.                       </div>
  60.                       <div class="form-group">
  61.                        <label class="control-label col-sm-3" for="weburl">Website:</label>
  62.                         <div class="col-sm-8">
  63.                           <input type="url" class="form-control" id="weburl" name="weburl">
  64.                         </div>
  65.                       </div>
  66.                       <hr />
  67.                       <div class="form-group">       
  68.                         <div class="col-sm-offset-3 col-sm-3">
  69.                           <button  class="btn btn-primary btn-sm">Save</button>
  70.                         </div>
  71.                         <div class="col-sm-3">
  72.                           <button type="reset" class="btn btn-primary btn-sm">Reset</button>
  73.                         </div>
  74.                         <div class="col-sm-3">
  75.                           <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
  76.                         </div>
  77.                       </div>
  78.                     </form>
  79.                   </div>
  80.                 </div>
  81.               </div>
  82.             </div>
  83.         </body>
  84.     </html>