Я использую обязательный атрибут в определенных полях формы. При отправке формы обязательные поля, которые не заполнены, обрамляются стандартной красной рамкой. Есть ли способ также изменить цвет фона обязательного поля, которое не заполнено после отправки? Вот пример текстового поля, которое я использую с обязательным атрибутом:
<input id="LastName" name="LastName" type="text" placeholder="Last Name" required/>
Вы можете использовать селектор атрибутов CSS следующим образом:
input[required] {
background-color: red;
}<input id="LastName" name="LastName" type="text" placeholder="Last Name"
required/>Это выберет input с атрибутами required. Теперь вы можете применить это с помощью простого JavaScript для достижения желаемого эффекта:
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";
}
});
});<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">Это добавляет прослушиватель событий при нажатии кнопки отправки. Когда это так, он использует querySelectorAll для получения всех входных данных, которые соответствуют селектору атрибута CSS, input[required]. Затем он выполняет цикл for-each для возвращаемого списка элементов. Наконец, он проверяет каждое введенное значение, обрезает его, чтобы убедиться, что там есть какой-то контент (пробелы не учитываются). Если на входе ничего нет, он устанавливает красный цвет фона.
Примечания:
Вы можете настроить его по своему усмотрению, обязательно отмените любое событие, которое вы обрабатываете, если входные данные недействительны, и вы можете добавить классы для стилей вместо использования element.style.<style>.
Вы можете изменить его с помощью css, как указано в некоторых комментариях выше, если это не работает, проверьте, установлен ли родительский атрибут background-color, в этом случае вы можете использовать тег !important для принудительного применения дочернего элемента.
Здравствуйте, вы можете попробовать это с помощью базового 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>
см. приведенную ниже скрипту требуемый скрипт
необходимо добавить в библиотеку jQuery head
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
