textbox validation on button click

Question

I am working on simple website making a textbox and a button. while clicking on button error should be given that "textbox value can't be empty". i tried from many sites but my issue is not yet resolved. one important thing to mention this button and textbox is not enclosed in a form.

<input id="AccountText" type="text" name="AccountText" 
       class="form-control" placeholder="Name" required=''/>

<input id="AddAccount" type="button" class="btn btn-primary" value="Save"  />

i have already tried controltovalidation but it is also not working for me.

what do the tags c#, visual-studio and asp.net have to do with the question being asked? None one of them are seemingly important to the code snippet posted. — Kritner
– Kritner, Commented Nov 25, 2015 at 12:09
@Kritner ControlToValidate is a property of ASP.Net validation controls. — Goran Mottram
– Goran Mottram, Commented Nov 25, 2015 at 12:14

Chris · Accepted Answer · 2015-11-25 11:56:38Z

5

Try this. Should help you get started.

HTML

<input id="AccountText" type="text" name="AccountText" value="" class="form-control" placeholder="Name" required=''/>

//submit button
<input class="button" type="submit" value="submit">

JQUERY

The basics: When the user clicks the submit button (using the .click() function) jquery checks whether the input value is empty (using .val() to get the value of the input.) If it is empty a message appears (using alert()) prompting the user to complete the field

$(document).ready(function(){
   $('.button').click(function(){
        if ($('#AccountText').val() == ""){
            alert('Please complete the field');
        }
    });
});

Example: http://jsfiddle.net/ggChris/mfbaxkfp/

edited Nov 25, 2015 at 11:56

answered Nov 25, 2015 at 11:51

Chris

4303 silver badges11 bronze badges

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

Comments

Sanjay Kumar N S · Accepted Answer · 2015-11-25 11:50:09Z

3

Try this:

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<input id="AccountText" type="text" name="AccountText" 
       class="form-control" placeholder="Name" required=''/>

<input id="AddAccount" type="button" class="btn btn-primary" value="Save"  />
<script>
$(document).ready(function() { 
    $('#AddAccount').click(function() {
        if (!$.trim($('#AccountText').val())) {
            alert("textbox value can't be empty");
        }
    });
});
</script>

answered Nov 25, 2015 at 11:50

Sanjay Kumar N S

4,7595 gold badges25 silver badges41 bronze badges

Comments

Goran Mottram · Accepted Answer · 2015-11-25 12:19:37Z

3

If you are using Web Forms, you could make use of ASP.Net validation controls. Your markup will look something like the following:

<asp:TextBox ID="AccountText" runat="server" CssClass="form-control" placeholder="Name" />

<asp:RequiredFieldValidator ID="AccountTextValidator" runat="server" 
    ControlToValidate="AccountText"
    Text="Textbox value can't be empty"
    />

<asp:Button ID="AddAccount" runat="server" Text="Save" CssClass="btn btn-primary" />

edited Nov 25, 2015 at 12:19

answered Nov 25, 2015 at 12:02

Goran Mottram

6,30428 silver badges41 bronze badges

Comments

Rajeesh Menoth · Accepted Answer · 2015-11-25 12:06:02Z

1

Try this :

Jquery Reference :

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

HTML :

<input id="AccountText" type="text" name="AccountText" class="form-control" placeholder="Name" required='' />

Jquery :

$(document).ready(function () {
$('#AddAccount').click(function () {

    var inVal = $("#AccountText").val();

    if (inVal.length == 0) {
        alert("textbox value can't be empty");
        $("#AccountText").focus();
    }
});

});

Demo : Click here

answered Nov 25, 2015 at 12:06

Rajeesh Menoth

1,7953 gold badges18 silver badges37 bronze badges

1 Comment

shifa fatima Over a year ago

i do not want to use alert. any other suggestion for example label , how can we use label to show the message???

Asit Kumar · Accepted Answer · 2015-11-25 12:15:01Z

1

You Can Try one of the following:

1) make required='true' 2) If the textbox have some specific about what type of text to be entered, you can also put the regex pattern. 3) You can use this in your script:

<script>
    $(document).ready(function() { 
        $('#AddAccount').click(function() {
            if (!$.trim($('#AccountText').val())) {
                alert("Please enter the text");
            }
        });
    });
    </script>

answered Nov 25, 2015 at 12:15

Asit Kumar

213 bronze badges

Collectives™ on Stack Overflow

textbox validation on button click

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related