使用javascript

Question

我想在onblur事件中将文本框值设置为空时将边框颜色更改为红色，而在不设置为空时将边框颜色更改为绿色。

第一次加载页面时，我单击文本框，将焦点从文本框移开，它将边框颜色更改为红色，然后我在文本框中键入一些值，将焦点移到文本框，更改边框到绿色，到现在为止一切正常。当我从文本框中删除文本并保持焦点时，它不会将颜色更改为红色，而是保持绿色，这是我做错的了，在这方面请帮助我...

<style type="text/css">
    .warning_brd
    {
        border: 1px solid red;
    }

    .success_brd
    {
        border: 1px solid green;
    }    
</style>

<script type="text/javascript">
    function Validate(field_id) {
        var myValue = document.getElementById(field_id);
        if (myValue.value.trim().length === 0) {
                myValue.className += " warning_brd";
            }
        else 
        {
            myValue.className += " success_brd";
        }
    }
</script>

<form id="form1" runat="server">
    <div class="container">
        <div class="row">
        <br />
        <br />
        <asp:TextBox ID="TextBox1" autocomplete="off" CssClass="form-control"  runat="server" onblur = "Validate('TextBox1')"></asp:TextBox>
        </div>
    </div>
</form>

当文本框中没有值时，我需要将边框更改为红色，而不是从文本框中删除值时，将边框更改为绿色边框。