how to validate 3 text boxes together

[Keith G Hicks]

asp.net 2.0

I'm stumped. I have a page that is used for updating user information. If
the user is logged in and they navigate to that page, then they see text
boxes for UserName, FirstName, Email, Old Password, New Password, Confirm
New Password. Since the user is logged in, I'm populating the data that's
not sensitive like the UserName, FirstName & Email. I'm leaving the Password
boxes blank.

In the database, all the fields above are required. They have to be filled
in when creating a new user on the New User page. On the Edit User page, my
goal is to allow them to change information or leave it blank. If it's
blank, the database is not updated. If it's filled in, then it is.

This is easy enough for the UserName, FirstName & Email text boxes. If the
UserName for example is "Keith" but they blank it out for some reason,
that's ok, it just wont' update. So it's not required (no required field
validator) on this page. So I don't have any required field validators on
those text boxes. I do have a regular expresson one on the UserName so that
it's a minumum lenght and another on the Email so that it's a valid email
address but that's it.

My problem is with the password text boxes. I want the user to be able to
leave them all blank or have to fill them all in. There are no required
field validators on them. I'm trying to handle this in code in the click
event handler of the submit button:

If Not ((Trim(txtOldPwd.Text) = "") And (Trim(txtNewPwd.Text) = "") And
(Trim(txtNewPwdConfirm.Text) = "")) _
And Not ((Trim(txtOldPwd.Text) <> "") And (Trim(txtNewPwd.Text) <> "") And
(Trim(txtNewPwdConfirm.Text) <> "")) Then
lblOldPwdRequired.Visible = True
lblNewPwdRequired.Visible = True
lblNewPwdConfirmRequired.Visible = True
Else
lblOldPwdRequired.Visible = False
lblNewPwdRequired.Visible = False
lblNewPwdConfirmRequired.Visible = False
End If

lblOldPwdRequired and the other "lbl" labels are simply red asterisks.

The code above works as expected but I had to set my submit button's
UseSubmitBehavior property to false. I'm not sure what to do now. I'm sure
the way I'm handlign things is not the best way. I'm looking for some
adivice on this. I only posted the code above so you could see what I'm
trying to accomplish. The validator controls just don't seem to be able to
handle dealing with 3 text boxes in the manner that I need.

Thanks,

Keith

 

[Mark Rae [MVP]]

The validator controls just don't seem to be able to handle dealing with 3
text boxes in the manner that I need.

You are quite correct - this is the reason that I, and many others, go
nowhere near the validation controls...

What you are trying to do, however, is extremely simple in client-side
JavaScript...

Firstly, the trimming. I have a library of common JavaScript validation
functions, one of which trims all the textboxes and textareas on a form:

function trimText(pobjForm)
{
for(intElement = 0; intElement < pobjForm.length; intElement++)
{
if(pobjForm[intElement].type.substring(0,4) == "text")
{
pobjForm[intElement].value =
pobjForm[intElement].value.replace(/^\s*|\s*$/g,"");
}
}
}

So just call that at the beginning of your validation routine - then you
don't have to worry about trimming every textbox as you go through...

Next, the JavaScript:

function validateForm()
{
trimText(document.forms[0]);

if (document.getElementById('<%=txtOldPwd.ClientID%>').value.length = 0
&& (document.getElementById('<%=txtNewPwd.ClientID%>').value.length = 0
&&
(document.getElementById('<%=txtNewPwdConfirm.ClientID%>').value.length = 0)
{
document.getElementById('<%=lblOldPwdRequired.ClientID%>').style.display
= "block";
document.getElementById('<%=lblNewPwdRequired.ClientID%>').style.display
= "block";
document.getElementById('<%=lblNewPwdConfirmRequired.ClientID%>').style.display
= "block";
}
else
{
document.getElementById('<%=lblOldPwdRequired.ClientID%>').style.display
= "none";
document.getElementById('<%=lblNewPwdRequired.ClientID%>').style.display
= "none";
document.getElementById('<%=lblNewPwdConfirmRequired.ClientID%>').style.display
= "none";
}
}

Finally, the submit button

<asp:MyButton ID="cmdMyButton" runat="server" Text="Submit"
OnClick="MyButton_Click" OnClientClick="return validateForm();" />

 

[Mark Rae [MVP]]

Apologies - just spotted an error...

if (document.getElementById('<%=txtOldPwd.ClientID%>').value.length = 0

That should be:

if (document.getElementById('<%=txtOldPwd.ClientID%>').value.length == 0

 

[Keith G Hicks]

Ok. Thanks. I get the basic idea but I have other questions now.

1. Should I eliminate all the validators on this page and incorporate their
functions into the java code? Or is the code you show below intended to work
along with the validators?

2. I created a java file and put the trim code into it. Is that correct?
Does that make that function accesible to the rest of the app?

3. I'm not sure where to put the function validateForm() code. Does that
just go into the end of the source page I'm working wth (after </html>)? I
assume I need <script type="text/javascript"> </script> around it?

4. I'm using a regular asp.net 2.0 button for the submit. There's no
OnClientClick event. I'm not clear what you are showing me there.

This is all pretty new to me so forgive my remedial questions.

Thanks,

Keith

The validator controls just don't seem to be able to handle dealing with 3
text boxes in the manner that I need.

You are quite correct - this is the reason that I, and many others, go
nowhere near the validation controls...

What you are trying to do, however, is extremely simple in client-side
JavaScript...

Firstly, the trimming. I have a library of common JavaScript validation
functions, one of which trims all the textboxes and textareas on a form:

function trimText(pobjForm)
{
for(intElement = 0; intElement < pobjForm.length; intElement++)
{
if(pobjForm[intElement].type.substring(0,4) == "text")
{
pobjForm[intElement].value =
pobjForm[intElement].value.replace(/^\s*|\s*$/g,"");
}
}
}

So just call that at the beginning of your validation routine - then you
don't have to worry about trimming every textbox as you go through...

Next, the JavaScript:

function validateForm()
{
trimText(document.forms[0]);

if (document.getElementById('<%=txtOldPwd.ClientID%>').value.length = 0
&& (document.getElementById('<%=txtNewPwd.ClientID%>').value.length = 0
&&
(document.getElementById('<%=txtNewPwdConfirm.ClientID%>').value.length = 0)
{

= "block";

= "block";

= "block";
}
else
{

= "none";

 

[Mark Rae [MVP]]

1. Should I eliminate all the validators on this page

In my opinion, yes - you get much more granular control over the entire
validation process...

and incorporate their functions into the java code?

It's JavaScript, not Java - they are very, very different...

2. I created a java file and put the trim code into it. Is that correct?

Yes but, again, it's JavaScript, not Java...

Does that make that function accessible to the rest of the app?

Yes, but not automatically - the JavaScript file needs to be included in
each page which needs it...

3. I'm not sure where to put the function validateForm() code. Does that
just go into the end of the source page I'm working with (after </html>)?

It doesn't really matter where it goes on the page - I tend to put it at the
top...

I assume I need <script type="text/javascript"> </script> around it?
Correct.

4. I'm using a regular asp.net 2.0 button for the submit. There's no
OnClientClick event.

Yes there is:
http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick(VS.80).aspx