validation with jquery and bootstrap and click event doesn't occured

Question

I'm new at JQuery and I want to use Jquery Bootstrap validation in my web form to validate the controls.

here is html :

 <div class="form-group">
 <div class=" col-lg-6">
 <label for="txtGroupName" class="req"> نام گروه </label>
 <asp:TextBox ID="txtGroupName" CssClass="required form-control text-right" runat="server"></asp:TextBox>
 </div>
 <div class="col-md-2">
 <br />
 <asp:Button OnClick="submitbtn_Click" ID="submitbtn" Width="100px" Height="40px"  CssClass="btn btn-success submit-btn"  runat="server" Text="جستجو" />
 </div>
 </div>

and :

$(function () {
$('#signinform').validate_popover({ onsubmit: false, popoverPosition: 'top' });

$(".submit-btn").click(function (ev) {
    ev.preventDefault();
    $('#signinform').validate().form();
    return false;
});

$(window).resize(function () {
    $.validator.reposition();
});
});

all the things are true and validation is working but when I enter a string value in my textbox (id=txtGroupName) and then click my button (id=submitbtn) the butto click event of this control doesn't occur (OnClick="submitbtn_Click").

If I change this control cssclass like this:

<asp:Button OnClick="submitbtn_Click" ID="submitbtn" Width="100px" Height="40px"  CssClass="btn btn-success" runat="server" Text="جستجو" />

the OnClick="submitbtn_Click" works. What changes do I need in my funnction to trigger OnClick="submitbtn_Click" after validation?

score 0 · Accepted Answer · edited May 23 '17 at 10:33

The jQuery click event handler for .submit-btn is stopping any further execution for the click event, including submitting the form, as you are manually calling e.preventDefault and returning false. Please note that returning false from a jQuery event handler is the same as calling e.preventDefault and e.stopPropagation. (See this SO answer).

So you should stop the form from being submitted only when the validation fails. As validator.form() validates the form and returns true if it is valid, false otherwise (See validator docs), you could then write the following jQuery click event handler:

$(".submit-btn").click(function (ev) {
    return $('#signinform').validate().form();
});

That should return false when the validation fails (cancelling the click event) or true otherwise (letting the post to happen, which should reach the server and execute your server side submitbtn_Click).

Hope it helps!

validation with jquery and bootstrap and click event doesn't occured

1 Answers1