Using javascript to validate content in textbox on click of a button

Question

I have a textbox and a submit button.

I want to validate a textbox whether it is empty or not using javascript and not validator controls like RequiredFeildValidator in asp.net. i.e i want to do client side validation.

Please guide me how to do it using javascript,any tutorials will be great help.

Here are my asp controls

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

Tim Wickstrom · Accepted Answer · 2011-12-15 19:32:41Z

1

I would recommend a much more robust solution using one of the many fantastic JS libs that are available such as jQuery, mooTools, Dojo, yui, etc.

Since jQuery seems to be the popular kid on the block with those new to JS libs why not start here:

http://docs.jquery.com/Plugins/Validation#Example

answered Dec 15, 2011 at 19:32

Tim Wickstrom

5,7114 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

king14nyr Over a year ago

I definitely support this solution if anything more than simple single-page validation is needed. Even with a single page with numerous validation rules, the jQuery approach is definitely the way to go, if you don't mind getting a bit more technical. I tried to keep it pretty simple for Ihsan, as his js experience seems limited, but +1 for the suggestion. :)

king14nyr · Accepted Answer · 2011-12-15 19:27:20Z

0

You can have the onClick run a javascript function to check the length of the value in the text box. A link on how to set up the onclick, if you have any questions...

http://www.w3schools.com/js/js_events.asp

Also, remember that it is best practice to have scripts in the <head> tag.

<script type="text/javascript" charset="utf-8">
    function validateBox1(){
        var text = document.getElementById('TextBox1');
        if(text.value.length == 0){
            //handle validation response here
        } else {
            //submit form, or whatever the button is supposed to do...
        }
    }
</script>

edited Dec 15, 2011 at 19:27

answered Dec 15, 2011 at 18:53

king14nyr

7156 silver badges21 bronze badges

4 Comments

Ishan Over a year ago

Thank you. i am new to javascript. can u please tell me where do i add this function?

king14nyr Over a year ago

@Ishan If you add a script tag to your html/asp (preferably in the <head> tag), that will do the trick. I'll edit my answer.

Ishan Over a year ago

Thank you again. can you tell me how to submit a page say from page1.aspx to page2.aspx. like we do Response.Redirect("page2.aspx"); if i do this on buttoon click it goes to page2.aspx without checking the validation

king14nyr Over a year ago

@Ishan It depends on how you are setting up the pages, and if you are using an MVC architecture... but if the <form> that contains these inputs is set up properly, in the else clause of this function, you can do document.(formID).submit();. Without any info as to the app architecture, that's the best I can give you... As to the "onclick", it should be fine if you change the "onclick" to this javascript function, since it is set up as a button, not submit type...

Collectives™ on Stack Overflow

Using javascript to validate content in textbox on click of a button

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related