html - 使用 Bootstrap 在输入框为空 HTML 时更改输入框的颜色

Question

我正在使用 bootstrap.css我的表单文件和输入框中我添加了一个选项 required=""


• 这样当客户在required=""中输入数据之前提交数据文本框
• 表单将显示警告消息，请填写该表单
• 这是我的<input type="text" name="type" id="type-1" value="buy" required="">

现在我的问题是

• 出现警告框时如何让输入框变红

Answer 1

你可以用 jquery 简单地做到这一点，看我下面的例子

<input type="text" id="demo"/>
<input type="button" id="btn" value="submit"/>

$("#btn").click(function(){
    var text = $("#demo").val();
    if(text === ""){
        $("#demo").css({"border" : "1px solid red", "color" : "red"}).val("this is required");
    }else{
        // the function you want to do with the form
    }
});

这是一个JSFIDDLE

您可能需要在此基础上进行一些构建，但它为您提供了基本概念

编辑 我编辑了 jsfiddle 以更好地工作

New JSFIDDLE