title: Add border automatically on focus for input field in jQuery
body: <p>I have a modal appointment form and applied form validation inside jQuery.
  I want to add border on focus in the input fields while validation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#add').click(function(event) {
    var patient_name = $('#patient_name').val();
    var patient_number = $('#patient_number').val();
    var patient_email = $('#patient_email').val();
  
    if (patient_name.trim() == '') {
      alert('Please enter your name.');
      $('#patient_name').focus($(this).css({
        'border': '1px solid red'
      }));
      return false;
    } else if (patient_number.trim() == '') {
      alert('Please enter your number.');
      $('#patient_number').focus($(this).css({
        'border': '1px solid red'
      }));
      return false;
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form id="appointment-form" action="" method="get" style="margin-top: 3rem;"&gt;
      &lt;div class="left-agileits-w3layouts same"&gt;
          &lt;div class="gaps"&gt;
              &lt;p&gt;Patient Name&lt;/p&gt;
              &lt;input type="text" id="patient_name" name="Patient Name" placeholder="" style="border-left:2px solid #0B6FB2" /&gt;
              &lt;div id="patient_name_error" class="val_error"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="gaps"&gt;
              &lt;p&gt;Phone Number&lt;/p&gt;
              &lt;input type="text" id="patient_number" name="Number" placeholder="" style="border-left:2px solid #0B6FB2" /&gt;
              &lt;div id="patient_number_error" class="val_error"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;center&gt;
                  &lt;button id="add" class="btn btn-secondary btn-lg" type="submit" value="Make an appointment" style="padding: 16px 20px 20px 20px; color: #fff; margin-top:20px;"&gt;Make an appointment
                  &lt;/button&gt;
              &lt;/center&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After validation completed while I clicked upon the input field again then the border is coming but I want to add the border automatically after validation without clicking the input field again.</p>