Client Side Jquery Validation on Button Click in asp.net?

Question

I am trying to validate fields on button click using Jquery but the problem is that it seems that code behind event and jquery event are running in parallel.

(UPDATED)

 <asp:Button ID="btnsave" runat="server" ClientIDMode="Static" OnClientClick="return clientFunction()" CssClass="ButtonText"
                    Text="SAVE" OnClick="btnsave_Click" />
                    &nbsp;

CLIENT SIDE VALIDATION:

<script type="text/javascript">

    function clientFunction() {

        var isValid = true;
        $('#txtsupplieruserid,#txtsuppliername,#txtbusinessemailid,#txtorganizationname,#txtphonenumber,#txtcity,#txtstate,#txtpostalcode,#txtaddress').each(function () {
            if ($.trim($(this).val()) == '') {
                isValid = false;
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
            }
        });
        if (isValid == false) {

            e.preventDefault();
            return isValid;
        }
        else {
            return isValid;
        }
    }
</script>

I would like to validate through Jquery first than go to code behind if it passes clientside validation. I want to do this using Jquery and not pure Javascript.

Change your jquery click handler to return true or false. Then use the return to either return true (and continue to run the server side function) or false (to not run the server side function). — Darren S
– Darren S, Commented May 18, 2015 at 6:06
@DarrenS just changing the return value to true or false is enough? — SamuraiJack
– SamuraiJack, Commented May 18, 2015 at 6:19
Typically I would use an OnClientClick attribute on my button to call a client side function that returns a boolean. eg <asp:Button OnClientClick="return validate();" runat="server" id="btnSave" onclick="btnSave_Click" /> if the function returns true it will raise a postback and proceed with your server side btnSave_Click function. — Darren S
– Darren S, Commented May 18, 2015 at 6:27

Mairaj Ahmad · Accepted Answer · 2015-05-18 07:25:35Z

1

You can use OnClientClick for client side validation and if validation passes return true otherwise return false. If true is returned server side function will be called otherwise it won't.

<asp:Button ID="btnsave" runat="server" ClientIDMode="Static" CssClass="ButtonText" Text="SAVE" OnClientClick="return clientFunction()"   onclick="btnsave_Click" />


function clientFunction()
{

    var isValid = true;
    $('#txtsupplieruserid,#txtsuppliername,#txtbusinessemailid,#txtorganizationname,#txtphonenumber,#txtcity,#txtstate,#txtpostalcode,#txtaddress').each(function ()  
    {
             if ($.trim($(this).val()) == '') {
                 isValid = false;
                 $(this).css({
                     "border": "1px solid red",
                     "background": "#FFCECE"
                 });
             }
             else {
                 $(this).css({
                     "border": "",
                     "background": ""
                 });
             }
     });
         if (isValid == false) {
             return false;
         }
         else {
             return true;
         }
}

If your controls are server controls than you may need to use ClientIDMode="Static". So their ID remains same.

edited May 18, 2015 at 7:25

answered May 18, 2015 at 6:03

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

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

6 Comments

SamuraiJack Over a year ago

How would this work with my code ? I mean can you please inlude the code that I have posted in your answer?

Mairaj Ahmad Over a year ago

Now check the answer.

SamuraiJack Over a year ago

its not working. Its still hitting the codebehind. Even though there was not a single field with value

Mairaj Ahmad Over a year ago

Have you changed the code like i have given in answer ?

Mairaj Ahmad Over a year ago

Ok first update your question with new code and secondly check the browser console for errors.

|

Collectives™ on Stack Overflow

Client Side Jquery Validation on Button Click in asp.net?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related