如何在没有重新加载页面的情况下在用户输入无效时自动显示错误

Question

当用户点击输入字段并开始输入时，我希望该框为红色，并在输入内容有效之前显示有关内容无效的错误消息。我想在不重新加载页面的情况下这样做，这就是我的代码现在所做的：

if amount and price and first_name and last_name and email and (have_error == False):

做一些事情

else:

显示错误消息

HTML：

        <label class = "sell_label">amount</label>
        <input type="text" class = "sell_input" name="amount" value="{{amount}}">
        {{error_amount}}


        <label class = "sell_label">price</label>
        <input type="text" class = "sell_input" name="price" value="{{price}}">
        {{error_price}}


        <label class = "sell_label">first name</label>
        <input type="text" class = "sell_input" name="first_name" value="{{first_name}}">


        <label class = "sell_label">last name</label>
        <input type="text" class = "sell_input" name="last_name" value="{{last_name}}">


        <label class = "sell_label">email</label>
        <input type="text" class = "sell_input" name="email" value="{{email}}">
        {{error_email}}

        <input type="submit" class = "sell_button" value = "okay">  
    <div class="error">{{error}}</div> 

如何将Javascript合并到我的html中以检测输入内容何时有效？