Не работают стили при валидации

@BaredJJ · Регистрация: 16.05.2017

Author24 — интернет-сервис помощи студентам

Добрый день. Делаю пример по книге Фримена. Но почему то при некорректных введенных данных, не применяются стили на форму. Что то скорей всего не так написал. Подскажите

CSS

.field-validation-error { color: #f00;}
.field-validation-valid { display: none;}
.input-validation-error { border: 1px solid #f00; background-color: #fee;}
.validation-summary-errors { font-weight: bold; color: #f00;}
.validation-summary-valid { display: none;}

C#

@model FrimenFirst.Models.GuestResponse
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>RsvpForm</title>
    <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<form asp-action="RsvpForm" method="post">
    <div asp-validation-summary="All"></div>
    <p>
        <label asp-for="Name">Your name:</label>
        <input asp-for="Name"/>
    </p>
    <p>
        <label asp-for="Email">Your email:</label>
        <input asp-for="Email"/>
    </p>
    <p>
        <label asp-for="Phone">Your phone:</label>
        <input asp-for="Phone"/>
    </p>
    <p>
        <label>Will you attend?</label>
        <select asp-for="WillAttend">
            <option value="">Choose an option</option>
            <option value="true">Yes, I'll be there</option>
            <option value="false">No, I can't come</option>
        </select>
    </p>
    <button type="submit">Submit RSVP</button>
</form>
</body>
</html>

C#

[HttpGet]
        public ViewResult RsvpForm()
        {
            return View();
        }
 
        [HttpPost]
        public ViewResult RsvpForm(GuestResponse guestResponse)
        {
            if (ModelState.IsValid)
            {
                Repository.AddResponse(guestResponse);
                return View("Thanks", guestResponse);
            }
            else
            {
                return View();
            }
        }

@lvlkoo · 05.12.2018, 03:47

Так а валидируете как? Условия атрибутами в моделе прописаны?

@BaredJJ · 05.12.2018, 08:13 **[ТС]**

Да. Описаны.

C#

public class GuestResponse
    {
        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }
        [Required(ErrorMessage = "Please enter your email address")]
        [RegularExpression(".+\\@.+\\..+", ErrorMessage = "Please enter a valid email address")]
        public string Email { get; set; }
        [Required(ErrorMessage = "Please enter your phone number")]
        public string Phone { get; set; }
        [Required(ErrorMessage = "Please specify whether you'll attend")]
        public bool? WillAttend { get; set; }
    }

Скрин из инструментов разработчика прилагаю

@BaredJJ · 05.12.2018, 22:12 **[ТС]**

Что и в правду никто не знает в чем причина?

@lvlkoo · 05.12.2018, 22:14

Брейк поинт поставте на if (ModelState.IsValid), посмотрите что там в ModelState в тот момент когда глючит ваша валидация

@BaredJJ · 05.12.2018, 22:16 **[ТС]**

Сейчас

@IamRain · 05.12.2018, 22:19

Сообщение от BaredJJ

Что и в правду никто не знает в чем причина?

Файлик со стилями подключен?

Если подключен, возможно, стили перекрываются какими-то другими правилами.
Посмотрите, какой цвет текста устанавливает класс input-validation-error, зайдите на вкладку Computed в консоли разработчика, и посмотрите, какое по факту правила для цвета применяется. И делайте так, чтобы не перекрывалось.

@lvlkoo · 05.12.2018, 22:20

Эмм, хотя стоп. Взглянул на ваш скрин.
У вас же там вроде класс валидации применяется как input-validation-error, а в css описано как field-validation-error

@IamRain · 05.12.2018, 22:20

Судя по скрину, класс ошибки применяется к полю.

@BaredJJ · 05.12.2018, 22:21 **[ТС]**

Ну вот скрин. Три ошибки

@BaredJJ · 05.12.2018, 22:31 **[ТС]**

Сообщение от lvlkoo

как input-validation-error, а в css описано как field-validation-error

Ну как у Фримена в книге написано)

Добавлено через 3 минуты

Сообщение от IamRain

зайдите на вкладку Computed в консоли разработчика, и посмотрите, какое по факту правила для цвета применяется. И делайте так, чтобы не перекрывалось.

По факту белый. А как это сделать? Я пока только с книжки могу переписывать)

Добавлено через 3 минуты
Если посмотреть на скриншот из панели разработчика, то видно что кроме моих стилей подключены еще стили anonimus, но я их руками не подключал

@IamRain · 05.12.2018, 22:46

В хроме по F12 открывается консоль - там есть вкладка Elements -> Computed - фактические вычисленные стили.
В вашем браузере тоже такое должно быть.

@BaredJJ · 05.12.2018, 23:05 **[ТС]**

По факту белый

Я посмотрел цвет поля и он был белый. Я завтра с утра еще перепроверю.

input-validation-error

- именно это поле в стиле.
А то что еще какой то непонятный anonimus стиль применяется это нормально?

@IamRain · 05.12.2018, 23:09

Сообщение от BaredJJ

какой то непонятный anonimus стиль применяется это нормально?

Видимо, это предпочтения браузера. Именно поэтому рекомендуют использовать reset.css

@BaredJJ · 06.12.2018, 07:53 **[ТС]**

Вот скрин со всеми значениями тэга. Свойства input-validation-error я там вообще не нашел(

Сообщение от IamRain

reset.css

Как это делается?

@lvlkoo · 06.12.2018, 12:16

Сообщение от BaredJJ

Свойства input-validation-error

Ну так добавте его в ваш css

@BaredJJ · 06.12.2018, 13:03 **[ТС]**

CSS

1	.input-validation-error { border: 1px solid #f00;

Так оно и так там есть. Или что то еще куда то добавить?

@lvlkoo · 06.12.2018, 13:25

Сообщение от BaredJJ

Так оно и так там есть. Или что то еще куда то добавить?

И кеш не забудте почистить

@BaredJJ · 06.12.2018, 13:29 **[ТС]**

Ничего не понял. Кэш почищу, не вопрос. Но стиль то такой был с самого начала!?

@lvlkoo · 06.12.2018, 13:34

Сообщение от BaredJJ

Но стиль то такой был с самого начала!?

У вас вроде другой был, разве нет?

Сообщение от BaredJJ

.field-validation-error

Сообщение от BaredJJ

.input-validation-error

@BaredJJ 19 / 18 / 7 Регистрация: 16.05.2017 Сообщений: 447
	05.12.2018, 22:21 [ТС]	10
	Ну вот скрин. Три ошибки Миниатюры 0

@BaredJJ 19 / 18 / 7 Регистрация: 16.05.2017 Сообщений: 447
	05.12.2018, 22:31 [ТС]	11
	Сообщение от lvlkoo как input-validation-error, а в css описано как field-validation-error Ну как у Фримена в книге написано) Добавлено через 3 минуты Сообщение от IamRain зайдите на вкладку Computed в консоли разработчика, и посмотрите, какое по факту правила для цвета применяется. И делайте так, чтобы не перекрывалось. По факту белый. А как это сделать? Я пока только с книжки могу переписывать) Добавлено через 3 минуты Если посмотреть на скриншот из панели разработчика, то видно что кроме моих стилей подключены еще стили anonimus, но я их руками не подключал 0

@BaredJJ 19 / 18 / 7 Регистрация: 16.05.2017 Сообщений: 447
	06.12.2018, 07:53 [ТС]	15
	Вот скрин со всеми значениями тэга. Свойства input-validation-error я там вообще не нашел( Сообщение от IamRain reset.css Как это делается? Миниатюры 0

@lvlkoo .NET C#,ASP.NET MVC 594 / 507 / 224 Регистрация: 16.10.2010 Сообщений: 1,902
	05.12.2018, 03:47	2
	Так а валидируете как? Условия атрибутами в моделе прописаны? 0

@BaredJJ 19 / 18 / 7 Регистрация: 16.05.2017 Сообщений: 447
	05.12.2018, 22:12 [ТС]	4
	Что и в правду никто не знает в чем причина? 0

@lvlkoo .NET C#,ASP.NET MVC 594 / 507 / 224 Регистрация: 16.10.2010 Сообщений: 1,902
	05.12.2018, 22:14	5
	Брейк поинт поставте на if (ModelState.IsValid), посмотрите что там в ModelState в тот момент когда глючит ваша валидация 0

@BaredJJ 19 / 18 / 7 Регистрация: 16.05.2017 Сообщений: 447
	05.12.2018, 22:16 [ТС]	6
	Сейчас 0

@IamRain 3457 / 2469 / 695 Регистрация: 02.08.2011 Сообщений: 6,690
	05.12.2018, 22:19	7
	Сообщение от BaredJJ Что и в правду никто не знает в чем причина? Файлик со стилями подключен? Если подключен, возможно, стили перекрываются какими-то другими правилами. Посмотрите, какой цвет текста устанавливает класс `input-validation-error`, зайдите на вкладку Computed в консоли разработчика, и посмотрите, какое по факту правила для цвета применяется. И делайте так, чтобы не перекрывалось. 0

@lvlkoo .NET C#,ASP.NET MVC 594 / 507 / 224 Регистрация: 16.10.2010 Сообщений: 1,902
	05.12.2018, 22:20	8
	Эмм, хотя стоп. Взглянул на ваш скрин. У вас же там вроде класс валидации применяется как input-validation-error, а в css описано как field-validation-error 0

@IamRain 3457 / 2469 / 695 Регистрация: 02.08.2011 Сообщений: 6,690
	05.12.2018, 22:46	12
	В хроме по F12 открывается консоль - там есть вкладка Elements -> Computed - фактические вычисленные стили. В вашем браузере тоже такое должно быть. 0

@BaredJJ 19 / 18 / 7 Регистрация: 16.05.2017 Сообщений: 447
	05.12.2018, 23:05 [ТС]	13
	По факту белый Я посмотрел цвет поля и он был белый. Я завтра с утра еще перепроверю. input-validation-error - именно это поле в стиле. А то что еще какой то непонятный anonimus стиль применяется это нормально? 0

@IamRain 3457 / 2469 / 695 Регистрация: 02.08.2011 Сообщений: 6,690
	05.12.2018, 23:09	14
	Сообщение от BaredJJ какой то непонятный anonimus стиль применяется это нормально? Видимо, это предпочтения браузера. Именно поэтому рекомендуют использовать reset.css 0

@lvlkoo .NET C#,ASP.NET MVC 594 / 507 / 224 Регистрация: 16.10.2010 Сообщений: 1,902
	06.12.2018, 12:16	16
	Сообщение от BaredJJ Свойства input-validation-error Ну так добавте его в ваш css 0

@lvlkoo .NET C#,ASP.NET MVC 594 / 507 / 224 Регистрация: 16.10.2010 Сообщений: 1,902
	06.12.2018, 13:25	18
	Сообщение от BaredJJ Так оно и так там есть. Или что то еще куда то добавить? И кеш не забудте почистить 0

@BaredJJ 19 / 18 / 7 Регистрация: 16.05.2017 Сообщений: 447
	06.12.2018, 13:29 [ТС]	19
	Ничего не понял. Кэш почищу, не вопрос. Но стиль то такой был с самого начала!? 0

@lvlkoo .NET C#,ASP.NET MVC 594 / 507 / 224 Регистрация: 16.10.2010 Сообщений: 1,902
	06.12.2018, 13:34	20
	Сообщение от BaredJJ Но стиль то такой был с самого начала!? У вас вроде другой был, разве нет? Сообщение от BaredJJ .field-validation-error Сообщение от BaredJJ .input-validation-error 1