C# Textbox Validation with Javascript

Question

4.00/5 (1 vote)

See more:

Hey guys,

I'm stuck on one part of my project, the validation. I have an Equipment entry field with text boxes and drop down lists. I've written a javascript that Disables the submit button until something is entered into ONE textbox, but then it just leaves the button open if the other fields are empty.

I want to have the client enter in all the fields then the submit button become enabled.

Here is the Javascript I have written

JavaScript

function Validate() {

      if (document.getElementById("<%=btnSubmit.ClientID%>").disabled == true) {
              var serial = document.getElementById("<%=btnSubmit.ClientID%>");
              serial.disabled = false;
          }

      }

I've 5 text boxes and I want to ensure they all have text in them before the submit becomes enabled.

I have a line for just one box, but I don't know how to do it for many boxes?

C#

SerialNum.Attributes.Add("OnKeyDown", "Validate()");

Would anyone be able to provide help for this? A Switch statement in the page load maybe? and if so HOW do I write it is the most confusing bit. If you could do even 2 text boxes I'd do the rest myself.

Thanks Guys and I hope this made sense and you can help out.

Posted 12-Jul-12 23:27pm

EuphorialXTC

Add a Solution

Comments

Vani Kulkarni 13-Jul-12 5:57am

Please reply as a comment to that solution given. Do not add your comments as solutions.

3 solutions

Solution 1

Instead, why don't you use RequiredFieldValidator for all your textboxes and enable the textbox. As you have mentioned that you need to make sure that textboxes should have values before submitting, it is better to use RequiredFieldValidator. See below links for example:
Required Field Validator[^]
required-field-validator[^]
Required Field Validator[^]

Posted 12-Jul-12 23:33pm

Vani Kulkarni

Comments

Sandeep Mewara 13-Jul-12 6:15am

Comments from OP:

1.) I appreciate your answer. Is there no way I can do it the way I was doing it as changing it the RequiredFieldValidator will play havoc with my code.
I'd prefer if someone could help with the route I'm on and explain to me rather than firing links at me. Thanks!

2.) The RequiredFieldValidator runs against the server and not the Client side if you get what I mean? that's the only reason I wish to avoid it, I'm a student and still learning the tricks of the trade! The RequiredFieldValidator would suit me perfectly but not my boss

Solution 6

you want to have the client enter in all the fields then the submit button become enabled.
i give you globle idea what you do for this. in javascript you make function like

JavaScript

function validation()
{
 if($("#txt").val()!="" && $("#txt").val()!="" &&  //same all txtbox those you want to validate)
 {
    var serial = document.getElementById("<%=btnSubmit.ClientID%>");
    serial.disabled = false;
 }
}

i hope your problem will solve if not please comment .

Posted 12-Jul-12 23:59pm

rizwan muhammed khan gouri

Updated 13-Jul-12 0:32am

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Accepted Answer · 2012-07-12T23:44:00

Solution 3

The logic here would be to loop through all the input controls and see if values exists for them. If any one of them is still empty, don't enable the submit button.

There can be few ways to do it. If you have just the 'input' control for taking data then just loop through all of them. Or else go control by control.
example:
Using normal Javascript:

JavaScript

function Validate() 
{
   var inputField1 = document.getElementById("<%=inputField1.ClientID%>");
   var inputField2 = document.getElementById("<%=inputField2.ClientID%>");
   if(inputField1.value.length > 0 && inputField2.value.length >  0)
      document.getElementById("<%=btnSubmit.ClientID%>").disabled = false;
   else
      document.getElementById("<%=btnSubmit.ClientID%>").disabled = true;
}

CodeBehind file:

C#

inputField1.Attributes.Add("onblur", "Validate()");
inputField2.Attributes.Add("onblur", "Validate()");

This should do.

P.S.: There is way to make it easy using jQuery but that would need a little knowledge about it.
P.S.2: There are validator controls too that does it but current solution is based on as asked.

Posted 12-Jul-12 23:44pm

Sandeep Mewara

Updated 13-Jul-12 0:13am

v2

Comments

EuphorialXTC 13-Jul-12 6:00am

Sorry about comments as solutions, this is my first post on the site, only getting the hang of it. This code works well, but when I enter values into the fields it doesn't enable the btnSubmit again once it's entered

Sandeep Mewara 13-Jul-12 6:12am

My mistake, I missed 'value' before taking length. Answer updated.
if(inputField1.value.length > 0 && inputField2.value.length > 0)

EuphorialXTC 13-Jul-12 6:35am

Thank you so much, this solved my problem. Thanks again, I marked it as the solution, is there anywhere I can give you Kudos?

Sandeep Mewara 13-Jul-12 7:17am

Good to know. :)

Marking it a solution and upvoting 5 to my answer is the max Kudo you can give for it. :)

EuphorialXTC 13-Jul-12 7:23am

Thank you! I have drop down lists on it but I'll write another Javascript using the same idea! Thanks again!

EuphorialXTC 13-Jul-12 7:43am

Hey!

So sorry to bug you, this works pefectly for what I want, but now my btnSubmit, runs the Javascript, but doesn't post the information entered into the database and it did before I added the JavaScript :(

Sandeep Mewara 13-Jul-12 7:54am

Above code has nothing on data persistent. What data you see in code behind? DEBUG and see the workflow.

EuphorialXTC 16-Jul-12 4:09am

Hi, Sorry the mistake was mine. I got it sorted. Working on the dropdownlist validation now