Javascript 当用户输入无效而不重新加载页面时，如何自动显示错误

当用户单击输入字段并开始键入时，我希望框为红色，并显示一条错误消息，说明在输入内容有效之前内容无效的原因。我希望在不重新加载页面的情况下执行此操作，我的代码现在就是这样做的：

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

做点什么

else:

显示错误消息

html:

金额
{{error_amount}}
价格
{{error_price}}
名字
姓
电子邮件
{{error_email}}
{{error}}

如何将Javascript合并到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>