Изменение цвета рамки

Question

Изменение цвета рамки

Рамзан Кадыров Ученик (185), закрыт 6 лет назад

Имеется такой код. Что нужно сделать, чтобы поменять цвет рамки незаполненных полей, например, на красный
function myFunction(){
var x=document.forms["contact"]["name"].value;
var a=document.forms["contact"]["vos"].value;
var b=document.forms["contact"]["phone"].value;
var c=document.forms["contact"]["email"].value;
var d=document.forms["contact"]["msg"].value;
if (x.length==0 || a.length==0||b.length==0||c.length==0||d.length==0){

alert("Пожалуйста, заполните все поля!")}
else{
alert("Спасибо за отзыв, "+ x +"! Ваше мнение очень важно для нас!");}
}

Answer 1

Икар Кабачков Просветленный (23556) 6 лет назад

https://jsfiddle.net/vjaxz595/

Answer 2

1) если используешь html5 разметку зачем проверять поля если всю данную
работу по проверке возможно переложить на браузер; используй
атрибут required -- поле становиться обязательным на заполнение
< input type='text' name='name' required / > и тд
// браузер сам укажет какое поле не заполнено

2) css раскрасить поля можно через css атрибуты селекторов
input:not([type='submit']):not([value='']):valid
{ border: 2px solid #0a0; }

input:not([type='submit']):invalid
{ border: 2px solid #a00; }

информация к размышлению
css :valid -----http://htmlbook.ru/css/invalid
css :invalid ---http://htmlbook.ru/css/invalid
css :reuered - http://htmlbook.ru/css/required

3) а если хочется использовать только javascript вот код проверки полей

function myFunction() {
var names = ["name", "vos", "phone", "email", "msg" ];
var form = document.forms["form"];
var inp="";
var error = 0;

for( var i=0, len=names.length; i < len; i++ ){
inp = form[ names[i] ];
inp.style.border = "";
if( inp.value.trim().length == 0 ){
inp.style.border = "2px solid #c00";
error++;
}
}

if( error > 0 ) {
alert("Пожалуйста, заполните все поля!")
} else { // x не определена undefined
alert("Спасибо за отзыв, " + x + "! Ваше мнение очень важно для нас!");
}
}

Answer 3

добавить элементам формы, требующим обязательного заполнния, атрибут required