javascript - 在jQuery中为输入字段自动添加边框

Question

我有一个模态约会表单并在 jQuery 中应用了表单验证。我想在验证时在输入字段中添加焦点边框。

$('#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>

验证完成后，我再次单击输入字段，然后边框即将到来，但我想在验证后自动添加边框，而无需再次单击输入字段。

Answer 1

但我想在验证后自动添加边框，而无需再次单击输入字段。

只需在之前添加相同的行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;
}

演示

$('#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>

Answer 2

$("#tableID123456789").focus();