locked
Validate a DDL and TextBox before PostBack to next page RRS feed

  • Question

  • User876561910 posted

    Hi

    Let’s say I have a form with an asp DropDown List and a TextBox.

    If a user selects a number (1, 2 or 3) from the DDL and adds XYZ into the box I would like some Java to ask them to go back and select a number greater than 3 in the DDL.

    If they don’t enter XYZ into the TextBox then the button will Click to the PostBackURL as normal

    Hope that makes sense




    Something like this

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    </head>
    
    <body>
    
    <form action="" method="post">
    	<asp:DropDownList id="MyDDL" runat="server">
    				<asp:listitem></asp:listitem>
    				<asp:listitem>1</asp:listitem>
    				<asp:listitem>2</asp:listitem>
    				<asp:listitem>3</asp:listitem>
    				<asp:listitem>4</asp:listitem>
    				<asp:listitem>5</asp:listitem>
    				<asp:listitem>6</asp:listitem>
    				<asp:listitem>7</asp:listitem>
    				<asp:listitem>8</asp:listitem>
    	</asp:DropDownList>
    	<br />
    	<asp:TextBox id="MyTextBox1" runat="server">
    	</asp:TextBox>
    	<br />
    	<asp:Button id="MyButton" runat="server" PostBackUrl="MyNextPage.aspx" Text="Button">
    	</asp:Button>
    </form>
    
    </body>
    
    </html>
    




    Saturday, November 3, 2018 11:04 AM

Answers

  • User876561910 posted

    It's OK.

    I worked it out.

     <script type="text/javascript" language="javascript">
        function ValidateInput(src, args) {
            var dItem1 = document.getElementById('<%=MyDDL.ClientID %>');
            var dItem2 = document.getElementById('<%=MyTextBox.ClientID %>');
            if (dItem1.selectedIndex == "5" || dItem2.selectedIndex == "xyz" ) {
                args.IsValid = false;
            }
            else {
                args.IsValid = true;
            }
        }
    </script>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, November 3, 2018 9:24 PM

All replies

  • User475983607 posted

    A JavaScript/jQuery example.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jquerydemo.aspx.cs" Inherits="WebFormsApp.jquerydemo" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem Value="0">0</asp:ListItem>
                    <asp:ListItem Value="1">1</asp:ListItem>
                    <asp:ListItem Value="2">2</asp:ListItem>
                    <asp:ListItem Value="3">3</asp:ListItem>
                    <asp:ListItem Value="4">4</asp:ListItem>
                    <asp:ListItem Value="5">5</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="TextBox1" runat="server" value="XYZ"></asp:TextBox>
            </div>
            <div>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            </div>
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        </form>
        <script>
            $('#<%=form1.ClientID%>').submit(function (e) {
    
                var ddlValue = $('#<%=DropDownList1.ClientID%>').val();
                var textValue = $('#<%=TextBox1.ClientID%>').val();
    
                if (textValue == 'XYZ' & ddlValue <= 3) {
                    e.preventDefault();
                    alert("Select a value larger than 3");
                }
      
            });
        </script>
    </body>
    </html>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormsApp
    {
        public partial class jquerydemo : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                Label1.Text = "You selected " + DropDownList1.SelectedValue.ToString();
            }
        }
    }




    Saturday, November 3, 2018 1:20 PM
  • User876561910 posted

    I'm trying to do this without jquery if possible.
    I need to keep this app as lightweight as it can be.

    Something like this (not working - but almost)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    
    <script>
    function MyChecker(objsrc, objArgs)
        {
    
            var Valid1=false;
            var TxT = document.Template.MyTextBox.value
            var DDL = document.Template.MyDDL.value 
            if(TxT=="xyz" && DDL=<"4")
            {
                Valid1 = false; 
            }
            else
            {
                Valid1 = true; 
            }
            objArgs.IsValid=Valid1;
            return;
        } 
    
    </script>
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    	<asp:DropDownList id="MyDDL" runat="server">
    				<asp:listitem></asp:listitem>
    				<asp:listitem>1</asp:listitem>
    				<asp:listitem>2</asp:listitem>
    				<asp:listitem>3</asp:listitem>
    				<asp:listitem>4</asp:listitem>
    				<asp:listitem>5</asp:listitem>
    				<asp:listitem>6</asp:listitem>
    				<asp:listitem>7</asp:listitem>
    				<asp:listitem>8</asp:listitem>
    	</asp:DropDownList>
    	<br />
    	<asp:TextBox id="MyTextBox" runat="server">
    	</asp:TextBox>
    	<br />
    	<br />
    	<asp:Button id="MyButton" runat="server" PostBackUrl="MyNextPage.aspx" Text="Button">
    	</asp:Button>
    	<asp:customvalidator id="Myvalidator" 
    	Runat="server" 
    	ControlToValidate="MyTextBox" 
    	Display="Dynamic" 
    	ClientValidationFunction="MyChecker" 
    	EnableClientScript="True" 
    	ErrorMessage="You can't have xyz and a number less than 4">
    </asp:customvalidator>
    </form>
    
    </body>
    
    </html>
    
    

    Saturday, November 3, 2018 5:11 PM
  • User876561910 posted

    It's OK.

    I worked it out.

     <script type="text/javascript" language="javascript">
        function ValidateInput(src, args) {
            var dItem1 = document.getElementById('<%=MyDDL.ClientID %>');
            var dItem2 = document.getElementById('<%=MyTextBox.ClientID %>');
            if (dItem1.selectedIndex == "5" || dItem2.selectedIndex == "xyz" ) {
                args.IsValid = false;
            }
            else {
                args.IsValid = true;
            }
        }
    </script>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, November 3, 2018 9:24 PM