Изменить цвет текстового поля с помощью CustomValidator - PullRequest
Новая
       19

Изменить цвет текстового поля с помощью CustomValidator

0 голосов
/ 13 марта 2012

Я создаю несколько текстовых полей во время выполнения, и я хотел бы изменить цвет текстового поля, если текстовое поле оставлено пустым, и пользователь отправляет форму.

Я использую код позадиподход, это код, который я написал в файле .aspx.cs

textBoxObj - это объект текстового поля, который я создаю во время выполнения, и это объект, для которого я хочу пустую проверку. 

CustomValidator customValidatorObj = new CustomValidator();
customValidatorObj.ControlToValidate = textBoxObj.ID;
customValidatorObj.ClientValidationFunction = "changeColorofTextBox";

и я написал небольшой фрагмент Javascript в файле .aspx, который выглядит следующим образом (я еще не написал логику для изменения цвета, просто пока делаю ее недействительной) 

<script type="text/javascript">
    function changeColorofTextBox(oSrc, args) {
        if (args.Value.length > 0) {
            args.IsValid = true;
        }
        else {
            args.IsValid = false;
        }
    }
</script>

В функции отправки нажмите кнопку формы, у меня есть эта проверка, если (Page.IsValid), а затем отправить форму.Однако даже если текстовое поле пусто, форма отправляется.Кажется, что функция даже не ударил.У вас есть указания на то, что я делаю неправильно?Я в порядке с проверкой на стороне клиента или на стороне сервера, в зависимости от того, что работает.

EDIT

Я получил ошибку, я просто должен был сделать это

customValidatorObj.ValidateEmptyText = true;

и он начал работать .. Спасибо, я не осознавал, что класс customValidator не пытается проверить, если элемент управления пуст.

Но я снова застрял: (

В форме у меня много текстовых полей. Предположим, пользователь ввел текст для 3 из текстовых полей и оставил 2 из них пустыми, как мне найти идентификаторы текстовых полей, чтобы я мог изменить цвет толькопустые. Или, как я могу написать код в JavaScript, чтобы узнать идентификатор элемента управления во время выполнения?

Я знаю, что мы должны сделать это

document.getElementById (CONTROLIDGOESHERE) .style.backgroundColor = "red";

но как мне получить значение CONTROLIDGOESHERE для передачи в функцию getElementById?

Любые указатели, спасибо.

Ответы [ 3 ]

1 голос
/ 13 марта 2012

Если вы работаете в .NET Framework версии 4.0, вы можете объявить свои текстовые поля, используя ClientIDMode = "Static". Таким образом, они будут иметь одинаковые идентификаторы на стороне клиента и на стороне сервера, например 

<asp:TextBox runat="server" ID="txtName" ClientIDMode="Static" />

Тогда вы можете запустить проверку на стороне клиента нажатием кнопки, объявив кнопку следующим образом: 

<input type="submit" id="btnSubmit" onclick="ClientSideValidation(); return false;" value="Save"/>

Функция JavaScript может выглядеть примерно так: 

<script type="text/javascript">
    function ClientSideValidation() {
        var txtName = document.getElementById("txtName");
        if (txtName.value.length == 0) {
            txtName.style.background = "#DE0000";
        }
        // Check other text boxes...
    }
</script>
1 голос
/ 13 марта 2012

Попробуйте установить customValidatorObj.EnableClientScipt = True

0 голосов
/ 13 марта 2012

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

.aspx.cs 

    CustomValidator customValidator = new CustomValidator();
    customValidator.ControlToValidate = textBox.ID;
    customValidator.ClientValidationFunction = "changeColorofTextBox";
    customValidator.ValidateEmptyText = true;
    customValidator.EnableClientScript = true;
    e.Item.Controls.Add(customValidator);

.aspx 

<script type="text/javascript">
    function changeColorofTextBox(oSrc, args) {
        if (args.Value.length > 0) {
            args.IsValid = true;
        }
        else {
            var ctrlid = oSrc.id;
            var validatorid = document.getElementById(ctrlid);
            ctrlid = validatorid.controltovalidate;
            document.getElementById(ctrlid).style.backgroundColor = "Tomato";
            args.IsValid = false;
        }
    }
</script>
...