Question

我是JQuery的新手，我想在我的网络表单中使用Jquery Bootstrap验证来验证控件。

这里是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>

和：

$(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();
});
});

所有的事情都是正确的，验证工作正常但当我在文本框中输入一个字符串值（id = txtGroupName）然后点击我的按钮（id = submitbtn）时，该控件的按钮点击事件不会发生（的OnClick =＆＃34; submitbtn_Click＆＃34）。

如果我改变这个控制cssclass如下：

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

OnClick="submitbtn_Click"有效。我的功能在验证后需要哪些更改才能触发OnClick="submitbtn_Click"？

Answer 1

.submit-btn的jQuery点击事件处理程序正在停止点击事件的任何进一步执行，包括提交表单，因为您手动调用e.preventDefault并返回false。请注意，从jQuery事件处理程序返回false与调用e.preventDefault和e.stopPropagation相同。（见SO answer）。

因此，只有在验证失败时才应停止提交表单。由于validator.form()验证表单，如果有效则返回true，否则返回false（参见validator docs），然后可以编写以下jQuery click事件处理程序：

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

当验证失败（取消点击事件）时应该返回false，否则返回true（让帖子发生，应该到达服务器并执行服务器端submitbtn_Click）。

希望它有所帮助！

使用jquery和bootstrap进行验证并且没有发生click事件

1 个答案: