javascriptjqueryhtmljquery-form-validator

Add border automatically on focus for input field in jQuery

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.

$('#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;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="appointment-form" action="" method="get" style="margin-top: 3rem;">
    <div class="left-agileits-w3layouts same">
        <div class="gaps">
            <p>Patient Name</p>
            <input type="text" id="patient_name" name="Patient Name" placeholder="" style="border-left:2px solid #0B6FB2" />
            <div id="patient_name_error" class="val_error"></div>
        </div>
        <div class="gaps">
            <p>Phone Number</p>
            <input type="text" id="patient_number" name="Number" placeholder="" style="border-left:2px solid #0B6FB2" />
            <div id="patient_number_error" class="val_error"></div>
        </div>
        <div class="clear"></div>
        <div class="modal-footer">
            <center>
                <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;">Make an appointment
                </button>
            </center>
        </div>
    </div>
</form>

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.

Solution

  • but I want to add the border automatically after validation without clicking the input field again.

    Just add the same line before focus

    if(patient_name.trim() == '' )
{
   alert('Please enter your name.');
   $('#patient_name').css({'border' : '1px solid red'}); //this line is added before focus
   $('#patient_name').focus();
   return false;
}
else if(patient_number.trim() == '' )
{
   alert('Please enter your number.');
   $('#patient_number').css({'border' : '1px solid red'});
   $('#patient_number').focus();
   return false;
}

    Demo

    $('#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').css({
      'border': '1px solid red'
    });
    $('#patient_name').focus();
    return false;
  } else if (patient_number.trim() == '') {
    alert('Please enter your number.');
    $('#patient_number').css({
      'border': '1px solid red'
    });
    $('#patient_number').focus();
    return false;
  }
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="appointment-form" action="" method="get" style="margin-top: 3rem;">
  <div class="left-agileits-w3layouts same">
    <div class="gaps">
      <p>Patient Name</p>
      <input type="text" id="patient_name" name="Patient Name" placeholder="" style="border-left:2px solid #0B6FB2" />
      <div id="patient_name_error" class="val_error"></div>
    </div>
    <div class="gaps">
      <p>Phone Number</p>
      <input type="text" id="patient_number" name="Number" placeholder="" style="border-left:2px solid #0B6FB2" />
      <div id="patient_number_error" class="val_error"></div>
    </div>
    <div class="clear"></div>
    <div class="modal-footer">
      <center>
        <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;">Make an appointment
                    </button>
      </center>
    </div>
</form>