Получить контроль в JavaScript

Question

У меня есть пара текстовых полей, которые будут содержать только даты. Если в одном текстовом поле есть дата, и пользователь пытается отправить ее без ввода даты в другое текстовое поле, они будут остановлены перед отправкой. Я хочу сделать это с помощью следующей функции JavaScript:

function ClientValidate(sender, args) {
       // Get Both form fields
       var txtdate1 = document.getElementById('<%=txtdate1.ClientID%>');
       var txtdate2 = document.getElementById('<%=txtdate2.ClientID %>');

    // do you client side check to make sure they have something
       if (txtdate1.value != '' && txtdate2.value == '') {

        args.IsValid = false;
    }
    else
    {
        args.IsValid = true;
    }
    if (txtdate2.value != '' && txtdate1.value == '') {

        args.IsValid = false;

    }
    else {
        args.IsValid = true;
    }
}

Создание текстовых полей и элементов даты выполняется следующим образом.

Dim bttndate1 As New ImageButton
    bttndate1.ID = "bttndate1"

    Dim txtdate1 As New TextBox
    txtdate1.ID = "txtdate1"
    txtdate1.Width = 65

    Dim calex1 As New AjaxControlToolkit.CalendarExtender
    calex1.TargetControlID = "txtdate1"
    calex1.Format = "MM/dd/yyyy"
    calex1.PopupButtonID = "bttndate1"

    '**************** date box2 ***************

    Dim bttndate2 As New ImageButton
    bttndate2.ID = "bttndate2"
    bttndate2.Style.Add("cursor", "pointer")

    Dim txtdate2 As New TextBox
    txtdate2.ID = "txtdate2"
    txtdate2.Width = 65


    Dim calex2 As New AjaxControlToolkit.CalendarExtender
    calex2.TargetControlID = "txtdate2"
    calex2.Format = "MM/dd/yyyy"
    calex2.PopupButtonID = "bttndate2"

Вот валидатор

    Dim custval As New CustomValidator
    custval.ID = "ValidPage"
    custval.ClientValidationFunction = "ClientValidate"
    custval.ErrorMessage = "You Must Enter a 'From' Date and a 'To' Date"
    custval.ErrorMessage = "You Must Select a Vendor"
    custval.SetFocusOnError = True
    custval.ControlToValidate = "txtdate1"
    custval.EnableClientScript = True

Моя проблема в том, что javascript не находит два текстовых поля, потому что я создаю их в коде есть идеи?

Answer 1

Я противник ClientScriptManager. Приведенные выше решения, вероятно, будут работать, но альтернативным методом будет объявление пары переменных в JavaScript за пределами вашего метода ClientValidate ().

var textdate1;
var textdate2;

Поместите литерал в свою страницу где-нибудь (вы можете поместить его где угодно, если он имеет атрибут runat = "server").

<asp:Literal ID="litJSVars" runat="server" />

Затем, если вы создаете текстовые поля и прочее, добавьте следующий код:

this.litJSVars.Text = "textdate1 = document.getElementById('" + txtdate1.ClientID + "');\\n";
this.litJSVars.Text += "textdate2 = document.getElementById('" + txtdate2.ClientID + "');";

Это не лучше и не хуже, чем идеи выше, это просто другой способ сделать это.

Answer 2

Я думаю, что помимо привязки валидатора к элементу управления, как рекомендовал Чалки, вам нужно сгенерировать скрипт в коде для получения ссылок на ваши элементы управления.

Проблема в том, что вы пытаетесь добавить ссылку на элемент управления, который не существует, пока сайт не запустится. Другими словами, вы пытаетесь создать javascript для ссылки на текстовые поля даты до того, как текстовые поля даты существуют (они не существуют, пока не будет сгенерирована страница). Итак, строки:

`var txtdate1 = document.getElementById('<%=txtdate1.ClientID%>');       
`var txtdate2 = document.getElementById('<%=txtdate2.ClientID %>');

не будет работать так, как вы ожидаете (они могут даже не скомпилироваться).

Я бы добавил эти две строки в метод, создавая текстовые поля даты, чтобы у вас были ссылки на jscript:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "var txtdate1 = document.getElementById('" + txtdate1.ClientID + "');", true);
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "var txtdate2 = document.getElementById('" + txtdate2.ClientID + "');", true);

Это создаст две переменные javascript, txtdate1 и txtdate2, которые можно использовать для ссылки на элементы даты.

Разница в том, что сценарий для поиска элементов управления генерируется в коде одновременно с созданием элементов управления.

Answer 3

Я не знаю точно, где вы определяете свои элементы управления, но они должны быть определены в классе страницы как защищенные свойства примерно так:

Protected txtdate1 As New TextBox
Protected txtdate2 As New TextBox

Protected bttndate1 As New ImageButton
Protected bttndate2 As New ImageButton

Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)

    bttndate1.ID = "bttndate1"
    Page.Form.Controls.Add(bttndate1)

    txtdate1.ID = "txtdate1"
    txtdate1.Width = 65
    Page.Form.Controls.Add(txtdate1)

    Dim calex1 As New AjaxControlToolkit.CalendarExtender
    calex1.TargetControlID = "txtdate1"
    calex1.Format = "MM/dd/yyyy"
    calex1.PopupButtonID = "bttndate1"

    '**************** date box2 ***************

    bttndate2.ID = "bttndate2"
    bttndate2.Style.Add("cursor", "pointer")
    Page.Form.Controls.Add(bttndate2)

    txtdate2.ID = "txtdate2"
    txtdate2.Width = 65
    Page.Form.Controls.Add(txtdate2)

    Dim calex2 As New AjaxControlToolkit.CalendarExtender
    calex2.TargetControlID = "txtdate2"
    calex2.Format = "MM/dd/yyyy"
    calex2.PopupButtonID = "bttndate2"


    MyBase.OnLoad(e)
End Sub

Answer 4

Используйте менеджер ClientScript, чтобы зарегистрировать свой JavaScript одновременно с созданием элементов управления календарем.

Answer 5

Попробуйте это в своем коде валидатора ...

custval.ControlToValidate = txtdate1.ClientID