Выделить текст между вводами формы?

Question

У меня есть форма, которая проверяется js, когда пользователь отправляет ее.Мой код обнаруживает пустые и недействительные поля (например, номер 1 в номере телефона, очевидно, является недействительным номером телефона).

Меня спрашивают, могу ли я выделить поля, отсутствующие или содержащие ошибкуЯ думаю, это было бы здорово, если бы я мог сделать это автоматически.С помощью HTML, как показано ниже, как я могу сделать имя, телефон или что-нибудь еще покраснеть?я не могу придумать какое-либо решение.Может быть, я смогу извлечь html тело из формы, найти целевой ввод и вставить div с левой стороны от ввода в тег prev и использовать этот div, чтобы сделать шрифт красным.Но я НЕНАВИЖУ этой идее, потому что для этого нужно совать HTML вместо DOM, и я почти уверен, что произойдет какая-то злоба.Есть идеи?

Name: <input type=text name="Name"/>
Phone: <input type=text name="PhoneNo"/>

Answer 1

Измените свой HTML-код таким образом, чтобы <label> окружал «Имя» и «Телефон», что сделает его более доступным и обеспечит требуемую функциональность.

HTML

<label for='Name'>Name:</label> <input type=text name="Name"/>
<label for='PhoneNo'>Phone:</label> <input type=text name="PhoneNo"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery

​$('input').blur(function() {
    $('label[for="'+$(this).attr('name')+'"]').css('color','red');
});​​​​

Живой пример

http://jsfiddle.net/tve8J/

Вам, конечно, придется добавить подтверждение, я не знаю, что вы считаетеи 'неверное поле'

Answer 2

таких как:

//some javascript validation here
name.style.color = 'red';
phoneNo.style.color = 'red';

Answer 3

Вы должны написать свой HTML-код, чтобы в первую очередь иметь элемент вокруг меток. Правильный HTML-код будет

<label for="Name">Name:</label> <input type="text" name="Name" id="Name" />

Затем просто добавьте класс к метке, чтобы он стал красным, когда должен.

Кстати, это даже делает фокус ввода полученным при нажатии на метку! Ура!

Answer 4

Как насчет label с атрибутом for?- Проверьте его документацию здесь