Привет, я пытаюсь изменить свой CSS, когда валидаторы недействительны. Я пробовал много вещей, таких как изменение его с помощью CssClass в моем валидаторе, использование javascript для его изменения или даже с помощью C# в бэкэнде программы. Но, похоже, это не работает.
Это стиль CSS, и часть, вокруг которой стоит 3 *, вызывает изменение цвета текста и нижней границы.
<style type = "text/css">
.inlog {
display: block;
letter-spacing: 4px;
padding-top: 30px;
text-align: center;
}
.inlog .invoertext {
display:block;
***color: white;***
cursor: text;
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
-moz-transform: translateY(-34px);
-ms-transform: translateY(-34px);
-webkit-transform: translateY(-34px);
transform: translateY(-34px);
transition: all 0.3s;
}
.inlog .invoertype {
background-color: transparent;
border: 0;
***border-bottom: 2px solid white;***
color: white;
font-size: 36px;
letter-spacing: -1px;
outline: 0;
padding: 5px 20px;
text-align: center;
transition: all 0.3s;
width: 200px;
}
.inlog .invoertype:focus {
max-width: 100%;
width: 400px;
}
.inlog .invoertype:focus + .invoertext {
color: whitesmoke;
font-size: 13px;
-moz-transform: translateY(-74px);
-ms-transform: translateY(-74px);
-webkit-transform: translateY(-74px);
transform: translateY(-74px);
}
.inlog .invoertype:valid + .invoertext {
font-size: 13px;
-moz-transform: translateY(-74px);
-ms-transform: translateY(-74px);
-webkit-transform: translateY(-74px);
transform: translateY(-74px);
}
</style>
Это мои валидаторы и текстовое поле
<label id = "Signin" class = "Loginform">
<label class = "inlog">
<asp:TextBox class = "invoertype" ID = "txtNaam" runat = "server"></asp:TextBox>
<asp:Label class = "invoertext" runat = "server" Text = "Voornaam"></asp:Label>
</label>
<asp:RequiredFieldValidator
CssClass = "Errormsg"
runat = "server"
ControlToValidate = "txtNaam"
ErrorMessage = "Naam is required"
ForeColor = "Red"
ValidationGroup = "Sigin">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
CssClass = "Errormsg"
runat = "server"
ControlToValidate = "txtNaam"
ErrorMessage = "Voer geldige voornaam in"
ValidationExpression = "^[a-zA-Z]{2,}$"
ForeColor = "Red"
ValidationGroup = "Sigin">
</asp:RegularExpressionValidator>
<label class = "inlog">
<asp:TextBox class = "invoertype" ID = "txtemailsignin" runat = "server"></asp:TextBox>
<asp:Label class = "invoertext" runat = "server" Text = "Email"></asp:Label>
</label>
<asp:RequiredFieldValidator
class = "Errormsg"
runat = "server"
ControlToValidate = "txtemailsignin"
ErrorMessage = "Email is required"
ForeColor = "Red"
ValidationGroup = "Sigin">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
ID = "Errormsgid"
class = "Errormsg"
runat = "server"
ControlToValidate = "txtemailsignin"
ErrorMessage = "Voer geldig email adress in"
ValidationExpression = "^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$"
ForeColor = "Red"
ValidationGroup = "Sigin">
</asp:RegularExpressionValidator>
<asp:CustomValidator
ID = "Signinemailgebuik"
class = "Errormsg"
runat = "server"
ErrorMessage = "Email is al in gebruik"
ForeColor = "Red"
ValidationGroup = "Sigin">
</asp:CustomValidator>
<label class = "inlog">
<asp:TextBox class = "invoertype" ID = "txtPasswordsignin" runat = "server" TextMode = "Password"></asp:TextBox>
<asp:Label class = "invoertext" runat = "server" Text = "Password"></asp:Label>
</label>
<asp:RequiredFieldValidator
class = "Errormsg"
runat = "server"
ControlToValidate = "txtPasswordsignin"
ErrorMessage = "Password is required"
ForeColor = "Red"
ValidationGroup = "Sigin">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
class = "Errormsg"
runat = "server"
ControlToValidate = "txtPasswordsignin"
ErrorMessage = "Password does not meet requirements"
ValidationExpression = "^.*(?=.{6,})((?=.*[!@#$%^&*()\-_=+{};:,<.>]){1})(?=.*\d)((?=.*[a-z]){1})((?=.*[A-Z]){1}).*$"
ForeColor = "Red"
ValidationGroup = "Sigin">
</asp:RegularExpressionValidator>
<label class = "inlog">
<asp:TextBox class = "invoertype" ID = "txtpasswordsignrepeat" runat = "server" TextMode = "Password"></asp:TextBox>
<asp:Label class = "invoertext" runat = "server" Text = "Repeat password">
</asp:Label>
<asp:RequiredFieldValidator
class = "Errormsg"
runat = "server"
ControlToValidate = "txtpasswordsignrepeat"
ErrorMessage = "Password is required"
ValidationGroup = "Sigin"
ForeColor = "Red">
</asp:RequiredFieldValidator>
<asp:CompareValidator
class = "Errormsg"
runat = "server"
ControlToValidate = "txtpasswordsignrepeat"
ControlToCompare = "txtPasswordsignin"
Type = "String" Operator = "Equal"
ErrorMessage = "Password not the same"
ForeColor = "Red"
ValidationGroup = "Sigin">
</asp:CompareValidator>
</label>
<label class = "buttonplacement">
<asp:Button ValidationGroup = "Sigin" class = "btn-draw" runat = "server" Text = "Sign in" OnClick = "Unnamed_Click" />
</label>
</label>
Вы видите некоторые различия с классом и CSSClass в валидаторах, потому что я пробовал разные варианты, если это имело бы значение, но все варианты, похоже, не работают.
Выделенные части изображения — это элементы, которые меняются с цветом внутри Css, и те, которые я хочу сделать красными, если валидатор недействителен.
введите описание изображения здесь
заранее спасибо
https://jsfiddle.net/L3cab2hd/
Это лучшее, что я могу сделать, но это не работает и выглядит одинаково
@jaydeeppatel да, конечно, подождите минутку, пожалуйста
Отредактировано, но это не выглядит и не работает так же






Вы можете использовать следующий фрагмент. Он проверит все валидаторы на странице и добавит или удалит класс CSS в зависимости от их достоверности.
<script>
$(document).ready(function () {
ValidatorUpdateIsValid = function () {
Page_IsValid = AllValidatorsValid(Page_Validators);
checkValidators();
}
});
function checkValidators() {
for (i = 0; i < Page_Validators.length; i++) {
var inputControl = document.getElementById(Page_Validators[i].controltovalidate);
if (null != inputControl) {
WebForm_RemoveClassName(inputControl, "validation-summary-errors");
$("#" + inputControl.id).closest("label").removeClass("validation-summary-errors-label");
}
}
for (i = 0; i < Page_Validators.length; i++) {
inputControl = document.getElementById(Page_Validators[i].controltovalidate);
if (null != inputControl && !Page_Validators[i].isvalid) {
WebForm_AppendToClassName(inputControl, "validation-summary-errors");
$("#" + inputControl.id).closest("label").addClass("validation-summary-errors-label");
}
}
}
</script>
<style>
.validation-summary-errors {
border: 3px solid #ff0000 !important;
}
</style>
Это работает на моей другой странице! Спасибо, остальное найду!
Проверьте, есть ли у вас мой последний фрагмент. Мне пришлось немного изменить его, чтобы он работал с текстовыми полями, у которых уже был атрибут класса. Я протестировал его, и он работает.
еще один вопрос, как я могу сделать текст красным?
Установите свойство цвета в validation-summary-errors css: color: red;
Пробовал это, но это не работает, даже если !important за ним, цвет текста остается прежним, хотя граница работает
Здесь он работает... Вероятно, это означает, что какой-то css переопределяет цвет....
Это сработало с текстом, который я пишу, но я думаю, что недостаточно хорошо его объяснил.
Используйте jquery, чтобы найти ближайшую метку и добавить/удалить класс из нее: $("#" + inputControl.id).closest("label").addClass("validation-summary-errors-label");
Возможно, глупый вопрос, но я плохо разбираюсь в javascript. Так куда мне вставлять? Еще раз спасибо за вашу помощь и усилия
Это в ответе выше.
Кажется, это не работает. Я попытался создать новый класс css с именем «validation-summary-errors-label» и «Color: red! Это не сработало. Я попытался в качестве другого варианта добавить «Цвет: красный! Важно» в «валидация-резюме-ошибки», но это тоже не работает.
Не могли бы вы создать скрипку или фрагмент кода? Чтобы мы могли вам помочь.