Erhalten Sie die Kontrolle in Javascript

Question

Ich habe ein paar Textfelder, die nur Daten enthalten. Wenn ein Textfeld ein Datum hat und der Benutzer versucht, ohne Eingabe eines Datums in das Textfeld des anderen Datums einzureichen, wird es vor dem Senden gestoppt. Die Art, wie ich dies tun will, ist mit der folgenden JavaScript-Funktion:

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; 
    } 
} 

Die Erstellung der Textfelder und das Datum Zeug ist wie folgt.

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" 

Hier ist der Validator

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 

Mein Problem ist, dass die Javascript nicht die beiden Textfelder findet, weil ich sie in Code erstellen irgendwelche Ideen?

Answer 1

Ich bin ein Gegner der ClientScriptManager. Die obigen Lösungen funktionieren wahrscheinlich, aber eine alternative Methode wäre, ein paar Variablen in JavaScript außerhalb der ClientValidate() -Methode zu deklarieren.

var textdate1; 
var textdate2; 

eine wörtliche irgendwo auf Ihrer Seite anlegen (Sie es wirklich überall hinstellen kann, solange es die runat = „server“ -Attribut).

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

dann in Veranstaltung, wo Sie die Textfelder und Sachen erstellen, den folgenden Code hinzu:

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

Es ist nicht besser oder schlechter als die Ideen oben, es ist nur eine andere Art zu geht darüber.

Answer 2

Versuchen Sie dies in Ihrem Validierungscode ...

custval.ControlToValidate = txtdate1.ClientID 

Answer 3

Ich denke, dass der Validator an die Steuerung neben binden als Chalkey empfohlen, müssen Sie Skript in dem Code-behind zu erzeugen, um die Referenzen zu bekommen, um Ihr Kontrollen.

Das Problem besteht darin, dass Sie versuchen, einen Verweis auf ein Steuerelement hinzuzufügen, das nicht vorhanden ist, bis die Site ausgeführt wird. Mit anderen Worten, Sie versuchen, das Javascript zu erstellen, um Datumsfelder zu referenzieren, bevor die Datumsfelder vorhanden sind (sie existieren nicht, bis die Seite generiert wird). Also die Zeilen:

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

wird nicht funktionieren, wie Sie erwarten (sie könnten nicht einmal kompilieren).

würde ich diese beiden Zeilen in der Methode hinzufügen die Datumstextfelder zu schaffen, damit Sie Ihre jscript Referenzen haben:

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

Damit werden die beiden JavaScript-Variablen erstellen, txtdate1 und txtdate2, die verwendet werden können um die Datumselemente zu referenzieren.

Der Unterschied besteht darin, dass das Skript zum Auffinden der Steuerelemente im Code erzeugt wird, der zur gleichen Zeit erstellt wird, zu der die Steuerelemente erstellt werden.

Answer 4

Verwenden Sie den ClientScript-Manager, um Ihr Javascript zur selben Zeit zu registrieren, zu der Sie die Kalendersteuerelemente erstellen.

Answer 5

Ich weiß nicht genau, wo Sie Ihre Steuerelemente definieren, aber sie sollten in der Seitenklasse als geschützte Eigenschaften etwas wie folgt definiert werden:

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