如何在javascript中输入有效值后删除字段的焦点边框答案

【问题标题】：How to remove the focus border of a field after valid input value in javascript如何在javascript中输入有效值后删除字段的焦点边框
【发布时间】：2018-04-11 05:10:21
【问题描述】：

我的 Laravel 项目中有一个模态约会表格。当我尝试在没有感觉任何输入字段的情况下提交表单时，它会给出带有红色边框的错误。

但是，如果我填写了Patient Name 字段并单击第二个字段Phone Number，则仍然显示第一个字段的带有红色边框的错误。

所以我想在每个字段具有有效输入值时自动删除带有错误消息的红色边框。

这是我的表格

<form id="appointment-form" action="" method="get" style="margin-top: 3rem;">

<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="modal-footer">
    <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>
</div>
</form>

这是我的脚本

$('#add').click(function(event)
{               
var patient_name = $('#patient_name').val();
var patient_number = $('#patient_number').val();

if(patient_name.trim() == '' )
{
   $('#patient_name_error').text('Please Provide Your Name');
   $('#patient_name').css({'border' : '1px solid red'});
   $('#patient_name').focus();
   return false;
}
else
{
    $('#patient_name_error').hide();
    $('#patient_name').css({'border' : '0px','border-bottom' : '2px solid #0B6FB2', 'border-left' : '2px solid #0B6FB2'});
}

if(patient_number.trim() == '' )
{
    $('#patient_number_error').text('Please Provide Your Contact Number');
    $('#patient_number').css({'border' : '1px solid red'});
    $('#patient_number').focus();
    return false;
}
else
{
    if(isNaN(patient_number))
    {
        $('#patient_number_error').text('Please Provide Numbers only');
        $('#patient_number').css({'border' : '1px solid red'});
        $('#patient_number').focus();
        return false;
    }
    else
    {
        $('#patient_number_error').hide();
        $('#patient_number').css({'border' : '0px', 'border-bottom' : '2px solid #0B6FB2', 'border-left' : '2px solid #0B6FB2'});
    }

}
}

【问题讨论】：

请考虑使用类和CSS来改变边框。

标签： javascript jquery validation forms

【解决方案1】：

添加这个：

$('#appointment-form').click(function () {

var patient_name = $('#patient_name').val();
var patient_number = $('#patient_number').val();


if ($('#patient_name_error').text() && patient_name.trim() != '') {
    $('#patient_name_error').hide();
    $('#patient_name').css({'border' : '0px','border-bottom' : '2px solid #0B6FB2', 'border-left' : '2px solid #0B6FB2'});
   }

if ($('#patient_number_error').text() && patient_number.trim() != '' && !isNaN(patient_number)) {
      $('#patient_number_error').hide();
      $('#patient_number').css({'border' : '0px', 'border-bottom' : '2px solid #0B6FB2', 'border-left' : '2px solid #0B6FB2'});
   }

});

【讨论】：

【解决方案2】：

如果您想在每个字段具有有效输入值时自动删除带有错误消息的红色边框，您应该为每个文本框绑定“输入”事件。例如-

$('#patient_name').on('input',function(){ $('#patient_name_error').hide(); $('#patient_name').css({'border' : '0px','border-bottom' : '2px solid #0B6FB2', 'border-left' : '2px solid #0B6FB2'}); });

【讨论】：