Как выделить text-box красным?

254

09 марта 2018, 16:45

Нужно если text-box пустой или вводит неправильно значение, вывести сообщение об ошибке и выделить его красным. Сообщение выводится, то что text box пустой. А текст бокс не меняется и сообщение о неправильно вводе не выводится. Как это сделать? HTML

            <span class="form-control-static">Телефон: </span><span class="notification"> *</span>
            <input class="form-control" data-val="true" data-val-required="Это поле является обязательным" id="Phone" name="Phone" type="tel" value="" placeholder="8(ХХХ)ХХХ-ХХ-ХХ" pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$">
            @Html.ValidationMessageFor(model => model.Phone)

В модели

    [Required(ErrorMessage = "Это поле является обязательным")]
    [RegularExpression(@"^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$", ErrorMessage = "Номер телефона должен иметь формат 8(ХХХ)ХХХ-ХХ-ХХ")]
    public string Phone { get; set; }

В CSS пишу что бы при нажатии border стал красным

input.input-validation-error{
    border: 1px solid red;
}

Но не работает

Answer 1

input.input-validation-error{
    border: 1px solid red;
}

Тут написано, что если у инпута установлен класс input-validation-error, то отобразить границу инпута красным.
Вы нужному элементу добавте класс input-validation-error и его граница станет красной :)

UPDATE

Наверное вопрос понял не правильно... Дело в определении правил для валидатора.
Видимо следующий ответ подойдет: https://stackoverflow.com/questions/19281415/how-to-use-html-validationmessagefor

Или вот: https://stackoverflow.com/questions/18276853/string-minlength-and-maxlength-validation-dont-work-asp-net-mvc

Answer 2

input:invalid {
    background: #fdd; /* Красный цвет фона */
   }
   input:valid {
    background: #dfd; /* Зеленый цвет фона */
   }

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Chrome extensions storage

Подскажите, что я делаю не так? Или посоветуйте, как нужно делатьИмеем структуру расширения:

218

javascript

Jquery проблема

Почему Jquery не работает? Значит скачал я js файл jquery, подключил к сайту, написал код в отдельном файле js и тоже его подключил

241

javascript

Как сделать такой каркас сайта? [требует правки]

324

javascript

Валидация формы при помощи replace

Удаляю из поля input ненужные символы так:

220