Obtenir le contrôle en javascript

Question

J'ai un couple de zones de texte qui contiendra uniquement des dates. Si une zone de texte a une date et que l'utilisateur tente de soumettre sans entrer de date dans l'autre zone de texte, il sera arrêté avant l'envoi. La façon dont je veux faire est avec la fonction javascript suivante:

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

La création des zones de texte et la date des choses est la suivante.

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" 

Voici le validateur

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 

Mon problème est que le javascript ne trouve pas les deux zones de texte parce que je les crée dans le code des idées?

Answer 1

Je suis un adversaire de la ClientScriptManager. Les solutions ci-dessus fonctionneront probablement, mais une autre méthode consisterait à déclarer quelques variables en JavaScript en dehors de votre méthode ClientValidate().

var textdate1; 
var textdate2; 

un littéral dans Mettre votre page quelque part (vous pouvez vraiment mettre partout aussi longtemps qu'il a l'attribut runat = « server »).

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

Puis, en cas où vous créez les zones de texte et d'autres choses, ajoutez le code suivant:

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

Il est pas mieux ou pire que les idées ci-dessus, il est juste une autre façon de va à ce sujet.

Answer 2

Essayez ceci dans votre code validateur ...

custval.ControlToValidate = txtdate1.ClientID 

Answer 3

Je pense qu'en plus attachant le validateur au contrôle comme Chalkey recommandé, vous devez générer le script dans le code-behind pour obtenir les références à votre contrôles.

Le problème est que vous essayez d'ajouter une référence à un contrôle qui n'existe pas jusqu'à ce que le site s'exécute. En d'autres termes, vous essayez de créer les zones de texte javascript à date de référence avant que les zones de texte de date existent (elles n'existent pas jusqu'à ce que la page soit générée). Ainsi, les lignes

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

ne fonctionneront pas comme prévu (elles pourraient même ne pas être compilées).

j'ajouter ces deux lignes dans la méthode la création des zones de texte de date afin que vous ayez vos références 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); 

Cela va créer les deux variables javascript, txtdate1 et txtdate2, qui peuvent être utilisés pour référencer les éléments de date. La différence est que le script pour trouver les contrôles est généré dans le code en même temps que les contrôles sont en cours de création.

Answer 4

Utilisez le gestionnaire ClientScript pour enregistrer votre javascript en même temps que vous créez les commandes du calendrier.

Answer 5

Je ne sais pas exactement où vous définissez vos contrôles, mais ils doivent être définis dans la classe de page en tant que propriétés protégées quelque chose comme ceci:

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