Самый простой способ изменить границу текстового поля при ошибке

Question

Я пытаюсь найти самый простой способ поместить красную рамку вокруг текстового поля, если он не соответствует определенному формату. Мой код обнаруживает свойство, если текст находится в правильном формате, но у меня возникает проблема с изменением цвета рамки при неудачной проверке. Я бы предпочел использовать только html/css и JavaScript, но, по-видимому, я не могу понять, как это сделать.

Это мой HTML для текстового поля:

<p class="fieldtitle"> First Name </p> 
<span><input type="text" class="textinput" id="fname" name="fname" /></span> 

Это мой JavaScript, чтобы проверить, если он находится в правильном формате:

function chkfName() { 
    var myfname = document.getElementById("fname"); 
    var pos = myfname.value.search(/^[A-Z][a-z]+$/); 

    if (pos != 0) { 
     //this is where I want to change the border around the text box 
     return false; 
    } else 
     return true; 
} 

Answer 1

Вы можете изменить его довольно легко, как это!

function chkfName() { 
var myfname = document.getElementById("fname"); 
var pos = myfname.value.search(/^[A-Z][a-z]+$/); 

if (pos != 0) { 
    fname.style.borderColor = "red"; 
    return false; 
} else 
    return true; 

}

Вот некоторые документы на него: http://www.w3schools.com/js/js_htmldom_css.asp

Answer 2

Создание таблицы стилей класса .error
Переключить его с JS с помощью Element.classlist.toggle^Docs

function chkfName() { 
 
    var fname = document.getElementById("fname"); 
 
    var pos = /^[\w'-]{2,32}$/.test(fname.value); 
 
    fname.classList.toggle("error", !pos); 
 
    return pos; 
 
} 
 

 
document.forms[0].addEventListener("submit", chkfName);

.error{border:2px solid red;}

<form> 
 
    <p class="fieldtitle"> First Name </p> 
 
    <span><input type="text" class="textinput" id="fname" name="fname" /></span> 
 
    <input type="submit" value="Test"> 
 
</form>

Я бы любезно отговорил вас от использования [A-Z][a-z]+, имя человека, как Đuro, даст хорошую ошибку, так как не является символом A-Z.
Кроме того, я бы использовал .trim() и конвертировал первый символ автоматически в заглавный - для лучшего удобства пользователей. Видя, что roko автоматически преобразуется в Roko из вашей программы - без лишних ошибок и остановки моего прогресса - было бы неплохим опытом.
В любом случае вы должны найти лучшее регулярное выражение.

Answer 3

Для получения информации, так как она не дает никаких JavaScript советов:

HTML5 позволяет протестировать шаблон с шаблоном атрибута:

Если возможно, не будет использоваться в реальной жизни все же, это быстрый способ проверить ваше регулярное выражение.

https://www.w3.org/TR/html-markup/datatypes.html#form.data.pattern

https://www.w3.org/wiki/HTML/Elements/input/text

http://caniuse.com/#feat=input-pattern

input:valid {/* empty doesn't trigger errors, so it is valid :(unless required */ 
 
    border-color:green; 
 
    box-shadow:0 0 0 3px green; 
 
    } 
 
input:invalid { 
 
    border-color:red; 
 
    box-shadow:0 0 0 3px tomato 
 
    }

<form> 
 
    <p>The pattern from your question</p> 
 
    <input type="text" name="test" pattern="^[A-Z][a-z]+$" placeholder="^[A-Z][a-z]" required /> 
 
    </form>