Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Newbie with first post..giving up on date validation (asp.net, C# and javascript)

Status
Not open for further replies.

Help14

Technical User
Mar 8, 2014
6
CA
Hi all,

First post, new to programming but I feel I have a done a good job so far. Using a web form with a gridview, with creation of stored procs to insert into database. I have about 3 date fields, that are calendar pop up fields ((icon) next to the textbox that user presses, calendar pops up and can select value), which seems to be working fine.

What is also working fine is validation of other fields ensuring no fields are blank before submit. The only thing left to do is perform validation of date fields. This includes checking to make sure date format is right, field is not blank and only alphanumeric characters are added.

Can anyone please help me extend this. I don't want to change what I am using here (don't want to use Ajax calendar control etc). I want to keep status quo and continue adding to the function leaving all else the same. Is this even possible?

----------------- Calendar control - PopupCalendar.aspx-----------------------------------
//taken from another website
protected void Change_Date(System.Object sender, System.EventArgs e)
{
if (Request.QueryString["textbox"] != "")
{
string strScript =
"<script>window.opener.document.forms(0)." +
Request.QueryString["textbox"].ToString() + ".value = '" +
CalPopup.SelectedDate.ToString("MM/dd/yyyy") +
"';self.close()" +
"</" + "script>";
RegisterClientScriptBlock("Calendar_ChangeDate", strScript);
}
}
</script>
<body style="margin:0px;">
<form id="Form1" runat="server">
<asp:Calendar id="CalPopup" OnSelectionChanged="Change_Date"
runat="server" backcolor="#FFFFCC" width="220px" daynameformat="FirstLetter"
forecolor="#663399" height="200px" font-size="8pt" font-names="Verdana"
bordercolor="#FFCC66" BorderWidth="1px" ShowGridLines="True">
<TodayDayStyle ForeColor="White" BackColor="#FFCC66"></TodayDayStyle>
<SelectorStyle BackColor="#FFCC66"></SelectorStyle>
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC"></NextPrevStyle>
<DayHeaderStyle Height="1px" BackColor="#FFCC66"></DayHeaderStyle>
<SelectedDayStyle Font-Bold="True" BackColor="#CCCCFF"></SelectedDayStyle>
<TitleStyle Font-Size="9pt" Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></TitleStyle>
<OtherMonthDayStyle ForeColor="#CC9966"></OtherMonthDayStyle>
</asp:Calendar>
</form>
</body>
</HTML>

--------------------Calendar.aspx - Main page------------------------------
<script>
function openCalendar() {
window.open('PopupCalendar.aspx?textbox=Field1', 'cal', 'width=220,height=200,left=270,top=180')
}

function openCalendar1() {
window.open('PopupCalendar.aspx?textbox=Field2', 'cal', 'width=220,height=200,left=270,top=180')
}

function openCalendar2() {
window.open('PopupCalendar.aspx?textbox=Field3', 'cal', 'width=220,height=200,left=270,top=180')
}

function checkForm(form)
{
if (document.getElementById("<%txt_album_name.ClientID%>").value == ""){
alert("Please enter the album name.");
document.getElementById("<%txt_album_name.ClientID%>").focus();
return false;
}

if (document.getElementById("<%txt_caption.ClientID%>").value == ""){
alert("Please enter the album name.");
document.getElementById("<%txt_caption.ClientID%>").focus();
return false;
}
return true;
}
</script>

//style sheets not added to code and just snippet of relevant code added

<form id="Form1" method="post" runat="server">
<table>
<div>
<table class="style1">
<tr>
<td class="style2">
Album Name</td>
<td>
<asp:TextBox ID="txt_album_name" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txt_album_name" ErrorMessage="Please enter the album name"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style2">
Caption</td>
<td>
<asp:TextBox ID="txt_caption" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txt_caption" ErrorMessage="Please enter the caption"></asp:RequiredFieldValidator>
</td>
</tr>

<tr>
<td class="style2">Date1</td>
<td>
<asp:textbox id="Date1" runat="server" Width="80px"></asp:textbox>
<a href="javascript:eek:penCalendar();"><img src="Images/Calendar.gif" border="0"></a>
</td>
</tr>

<tr>
<td class="style2">Date2</td>
<td>
<asp:textbox id="Date2" runat="server" Width="80px"></asp:textbox>
<a href="javascript:eek:penCalendar1();"><img src="Images/Calendar.gif" border="0"></a>
</td>
</tr>
<tr>
<td class="style2">Date3</td>
<td>
<asp:textbox id="Date3" runat="server" Width="80px"></asp:textbox>
<a href="javascript:eek:penCalendar2();"><img src="Images/Calendar.gif" border="0"></a>
</td>
</tr>

On clicking the insert button I want to perform client side validation/all in one (form fields, dates) and then call the code behind page Calendar.aspx.cs to run the insert into the database. (Select date fields from database show they are stored as (yyyy-mm-dd - 2014-03-08)
<tr>
<td class="style4">
<asp:Button ID="btn_insert" runat="server" onClientClick="return checkForm(this); onclick="btn_insert_Click"
Text="Insert" />
</td>
</tr>
</form>

Thanks so much everyone, you will be tremendous help.
 
I'm not quite sure I understand your question. If you have a calendar pop up that populates the field, then it should already be valid.
If you are going to allow the user to manually change it then just use the standard validation controls.
Required field validator
and Regex validators. You can also use custom validators on the server.

There are several ways to do it.
Personally, I would avoid all of that and just force the user to use the calendar popup. then make the textbox field readonly so they cannot edit it. This way, no validation is needed.
 
jbenson001,

Thanks so much!! I have been staring at this thing to long and it didn't even dawn on me to think like that. So works perfectly, however, in thinking about this further, what I still need now is to say:

if the date chosen for Date1 is greater then current date then give me an error.. "date 1 cannot be greater than current date"
if date2 is less then date 1 give me an error "date 2 cannot be less then date 1"
if date 3 is less than Date2 or date1, then "project has already started"

On another note, and please tell me is I have to start another thread, I need to induce sorting on my gridview:

for each field listed on the form, I have created the following:

<asp:TemplateField HeaderText="Here" SortExpression="Here">
<editItemTemplate>
<asp:TextBox ID="txt_album_name" runat="server" Text='<%# Eval("txt_album_name")%>'></asp:Textbox>
</editItemTemplate>
<ItemTemplate>
<div class='grid'>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("txt_album_name")%>'></asp:Label>
<div>
</ItemTemplate>
</asp:TemplateField>

Is there a quick way to get this going? Thanks jbenson001.
 
To validate the dates chosen, there are a couple of ways you can do it.
You can do it client side on the button click, or , server side (which may be easier) with a custom validation control.

As for sorting, the only "easy" way to get it started would be if you used the "datasource" controls, HOWEVER, I DO NOT RECOMMEND USING THEM.
Since by the wording of your post, you are using SPs (which is the best way) then there will be some coding involved which may seem confusing at first, but once you do it, you will get it.

I just did a search in Google with "asp.net sorting a gridview without datasource controls"
You will see many blogs and examples and even some youtube videos. Just make sure you select the ones that say WITHOUT datasource controls, some others seemed to have gotten mixed in.

here are a couple of examples I found:
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top