Remove From My Forums

Validate a DDL and TextBox before PostBack to next page

Question

User876561910 posted

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

Answered by:

Validate a DDL and TextBox before PostBack to next page

Question

Answers

All replies