在asp.net中单击按钮的客户端Jquery验证？答案

【问题标题】：Client Side Jquery Validation on Button Click in asp.net?在asp.net中单击按钮的客户端Jquery验证？
【发布时间】：2015-05-18 05:45:16
【问题描述】：

我正在尝试使用 Jquery 验证按钮单击时的字段，但问题是事件和 jquery 事件背后的代码似乎是并行运行的。

（已更新）

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

客户端验证：

<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>

如果它通过客户端验证，我想先通过 Jquery 进行验证，而不是转到后面的代码。我想使用 Jquery 而不是纯 Javascript 来做到这一点。

【问题讨论】：

更改您的 jquery 点击处理程序以返回 true 或 false。然后使用 return 来返回 true（并继续运行服务器端函数）或 false（不运行服务器端函数）。
@DarrenS 只需将返回值更改为 true 或 false 就足够了吗？
通常我会在我的按钮上使用 OnClientClick 属性来调用返回布尔值的客户端函数。例如如果函数返回 true，它将引发回发并继续执行服务器端 btnSave_Click 函数。

标签： javascript jquery asp.net validation

【解决方案1】：

您可以使用OnClientClick 进行客户端验证，如果验证通过return true，否则return false。如果返回 true，将调用服务器端函数，否则不会调用。

<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;
         }
}

如果您的控件是server controls，那么您可能需要使用ClientIDMode="Static"。所以他们的 ID 保持不变。

【讨论】：

这将如何与我的代码一起使用？我的意思是，您能否将我在您的答案中发布的代码包含在内？
现在检查答案。
它不工作。它仍然击中代码隐藏。即使没有一个字段具有值
您是否像我在回答中给出的那样更改了代码？
好的，首先用新代码更新您的问题，然后检查浏览器控制台是否有错误。