javascript - focus() 函数不适用于 javascript 中的输入字段

Question

我有一个模态约会表格并在 javascript 中应用了表单验证。它们的alert()功能工作正常，但focus()功能不适用于输入字段。我已经多次搜索并申请了解决方案，但没有奏效。

这是我的html代码

<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="gaps">
                    <p>Email</p>
                    <input type="email" id="patient_email" name="email" placeholder="" style="border-left:2px solid #0B6FB2"/>
                    <div id="patient_email_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>

这是我的 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();
           return false;
        }
        else if(patient_number.trim() == '' )
        {
           alert('Please enter your number.');
           $('#patient_number').focus();
           return false;
        }
        else if(patient_email.trim() == '' )
        {
           alert('Please enter your email.');
           $('#patient_email').focus();
           return false;
        }
    });