如何验证输入以查看它是否与数据库中的记录匹配

I am trying to create an input that queries the database and returns whether or not a result exists in the database. I have it partially working, but my box is glowing green whenever I only type in one letter. It would be better if it stayed red until it actually found a exact match and then turned green. Edit: I just realized there is also something wrong with my query. It is correctly querying the database now. The original issue is my main problem.

$(document).ready(function(){
    $("#load").keyup(function (e){
        e.preventDefault();
       ;

    searchRequest = $.ajax({
        url: 'check_load_no.php',
        data: $('#load').serialize(),
        type: 'POST',
        success: function (data) {
            $(".verify").css('box-shadow', '0px 0px 9px 2px #84f850');
            $(".error").css('display', 'none');
            $(".success").css('display', 'block');

        },
        error: function (data) {
            $(".verify").css('box-shadow', '0px 0px 9px 2px #ad0037');
            $(".success").css('display', 'none');
            $(".error").css('display', 'block');
        }

    });

    });
   });

Below is my php

<?php include('../model/conn.php'); ?>
<?php include('../model/conn2.php') ?>

<?php
$sql = "SELECT cmt_2 FROM oeordhdr_sql WHERE cmt_2 = '{$_POST['load']}'";
$query = (odbc_exec($conn,$sql));
$row = (odbc_fetch_row($query));
if($row['cmt_2']){
    echo 'yeah';
}

HTML

  <h1>Please add the info based on your load number</h1>
        <form action="" method="post">
        <div class="card" >
            <input class="verify" id="load" type="text" name="load" placeholder="Load Number" required/>
    <span class="error" style="display: none;"><i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"> </i>I'm not finding anything</span>   
    <span class="success" style="display: none;"> <i class="fa fa-check-cube fa-lg" aria-hidden="true"> </i> Congratulations, that record exists!</span><br> 
<button  class="update_button" type="submit" name="add" value="update">Update</button></div></form>

Decided to output the error/success message using php instead of changing css

$("#load").keyup(function (e){
        e.preventDefault();


    searchRequest = $.ajax({
        url: 'check_load_no.php',
        data: $('#load').serialize(),
        type: 'POST',
        success: function (data) {
            console.log(data);
            if(data==="yeah")
            {
                $(".validate").html(data);

            }
            else
            {
                $(".validate").html(data);


            }
        }

    });

    });

My php

 $sql = "SELECT cmt_2 FROM oeordhdr_sql WHERE cmt_2 LIKE '{$_POST['load']}'";
    $query = odbc_exec($conn,$sql);
    $row = (odbc_fetch_row($query));
    if($row){
        echo '<span class="success" style="display: block;"> <i class="fa fa-check-cube fa-lg" aria-hidden="true"> </i> Congratulations, that record exists!</span>';

    }else{
        echo'<span class="error" style="display: block;"><i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"> </i>I\'m not finding anything</span>';
    }

My HTML

<h1>Please add the info based on your load number</h1>
        <form action="" method="post">
        <div class="card" >
            <input class="verify" id="load" type="text" name="load" placeholder="Load Number" required/>
    <div class="validate"></div><br> 
<button  class="update_button" type="submit" name="add" value="update">Update</button></div></form>

success: function (data) {
     if(data==="yeah")
     {
        $(".verify").css('box-shadow', '0px 0px 9px 2px #84f850');
        $(".error").css('display', 'none');
        $(".success").css('display', 'block');
     }
     else
     {
        $(".verify").css('box-shadow', '0px 0px 9px 2px #ad0037');
        $(".success").css('display', 'none');
        $(".error").css('display', 'block');
     }
}

check if response is what you need and only then add .success class

Your error handler will not be called even if "yeah" is not echoed out by PHP script, as the server response would still be HTTP 200. For this reason, your success handler will always trigger (unless of course there is an actual problem with your server/application).

If you want to trigger the error handler, you would have to have the server send a 400 or 500 series HTTP response code (likely 404 in this case) for the case when no match is found.

Alternately, you could just put all your logic in the success handler and not change your server-side code at all. You would just have to test for the value of "yeah" being present or not.

You should also consider adding/removing CSS classes on your DOM elements rather than specifically specifying the CSS in your function. This would allow you to later change the CSS if needed, without having to alter this function.