Question

我在表单中的某些字段上使用必需属性。提交表单时，未填写的必填字段会在其周围获得标准红色边框。有没有办法在提交后更改未填写的必填字段的背景颜色？这是我使用必需属性的示例文本框：

var roomTemp = new Room({
        name: "Villains",
        topic: "Discussing newly spotted villains on pur streets",
        users: usersArr,
        messages: messagesArr
    });

Answer 1

你可以这样使用CSS attribute selector：

＆＃13;

input[required] {
  background-color: red;
}

＆＃13;

<input id="LastName" name="LastName" type="text"  placeholder="Last Name"
required/>

＆＃13;

这将选择input个required属性。现在，您可以使用一些简单的JavaScript来应用它来实现所需的效果：

＆＃13;

var submit_button = document.getElementById("submit_button");

submit_button.addEventListener("click", function(e) {
  var required = document.querySelectorAll("input[required]");
  
  required.forEach(function(element) {
    if(element.value.trim() == "") {
      element.style.backgroundColor = "red";
    } else {
      element.style.backgroundColor = "white";
    }
  });
});

＆＃13;

<input id="FirstName" name="FirstName" type="text"  placeholder="First Name" required/>
<input id="LastName" name="LastName" type="text"  placeholder="Last Name" required/>

<input id="submit_button" type="submit">

＆＃13;

这样做是在单击提交按钮时添加事件侦听器。如果是，则使用querySelectorAll获取与CSS属性选择器input[required]匹配的所有输入。接下来，它在返回的元素列表上执行for-each循环。最后，它检查每个输入值，进行修剪，以确保其中有一些内容（空格不计）。如果输入中没有任何内容，则会将背景颜色设置为红色。

备注：

您可以根据需要进行调整，如果输入无效，请务必取消正在处理的任何事件，并且可以为样式添加类而不是使用element.style.<style>。

Answer 2

您好，您可以通过基本的Css

来试试

:required {
 background: red;
 }

或者轻松使用jQuery它会动态工作在按钮上单击背景颜色将是红色希望它有帮助。

html代码

<input id="LastName" name="LastName" type="text"  placeholder="Last Name"
required/>
<input id="sub" type="button">

和jquery代码

 <script>
$('#sub').click(function(){
$('#LastName').each(function() {
if($(this).val() == '') {
$(this).css('background-color' , '#FF0000');
$(this).attr("placeholder", "Required");
 }
 });
 });
 </script>

但是如果你想为整个表单执行此操作，那么它将类似于下面的

    <script>
    $('#sub').click(function(e){ //submit button name
    e.preventDefault()
    $('.required').each(function() {   //a constant class for evert input item
    if($(this).val() == '') {
    $(this).css('background-color' , '#FF0000');
    $(this).attr("placeholder", "Required");
    }
    });
    });
    </sctript>

见下面的小提琴 required Fiddle

必须添加内部头jQuery库

<head>
<script        
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">   
</script>
</head>

Answer 3

您可以使用上面某些评论中提到的css进行更改，如果它不起作用，则检查是否设置了父背景颜色属性，在这种情况下，您可以使用！important标签强制执行该子项。

Answer 4

input[type="text"],lastname {
  background-color : red;
}

所需领域的背景颜色

4 个答案: