Question

我有一个webform应用程序

在母版页中我有表格

<body class="tile-1-bg">
<form id="form1" runat="server">

和我的page.aspx

<div class="control-group" runat="server" id="divNome">
    <label for="txtNome" class="control-label">Nome o Ragione Sociale*</label>
    <div class="controls">
        <asp:TextBox runat="server" ID="txtNome" class="form-control input-sm" required></asp:TextBox>
    </div>
</div>
<asp:Linkbutton runat="server" ID="lnkBtnRegistrati" class="btn btn-default btn-lg btn-block" Text="REGISTRATI" OnClientClick="if(checkForm())return true; else return false;" OnClick="lnkBtnRegistrati_Click"></asp:Linkbutton>

我想调用一个模拟Button提交的Javascript函数，如果某些验证出错则返回false并在表单字段中显示错误。

    function checkForm()
    {
         ?
    }

我该怎么办？

Answer 1

您可以创建自己的验证并返回值。您需要将OnclientClick更改为OnClientClick="return checkForm()"

<div id="errorSummary" style="display: none;">For is invalid!</div>

<script type="text/javascript">
    function checkForm() {
        var formIsValid = false;

        //do your form validation
        if ($("#<%= txtNome.ClientID %>").val() != "") {
            formIsValid = true;
        }

        //show or hide the error message
        if (!formIsValid) {
            $("#errorSummary").show();
        } else {
            $("#errorSummary").show();
        }

        //return the validation result
        return formIsValid;
    }
</script>

但您也可以使用Validaton Controls和ValidationSummary

中的内置版本执行相同的操作

<asp:TextBox runat="server" ID="txtNome"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
    ErrorMessage="Input cannot be empty" ControlToValidate="txtNome" Display="Dynamic">
</asp:RequiredFieldValidator>

<asp:ValidationSummary ID="ValidationSummary1" runat="server" />

<asp:LinkButton runat="server" ID="lnkBtnRegistrati" Text="REGISTRATI"></asp:LinkButton>

请注意，输入字段的required属性仅受最新浏览器的支持，请参阅https://www.w3schools.com/TAgs/att_input_required.asp

Answer 2

你想要的是返回checkform的结果，你可以自己在checkform方法中处理它的状态：

Aspx代码

从

改变

<asp:Linkbutton runat="server" ID="lnkBtnRegistrati" class="btn btn-default btn-lg btn-block" Text="REGISTRATI" OnClientClick="if(checkForm())return true; else return false;" OnClick="lnkBtnRegistrati_Click"></asp:Linkbutton>

到

    <asp:Linkbutton runat="server" ID="lnkBtnRegistrati" class="btn btn-default  
 btn-lg btn-block" Text="REGISTRATION" OnClientClick="return checkform();"  
 OnClick="lnkBtnRegistrati_Click"></asp:Linkbutton>

在 javascript 方法中：

function checkForm()
    {
        if(true) // your condition to check
       {
            return true;

       }
        else{
              return false;
           } 
    }

说明：

在标记中Onclientclick将返回您的条件是否满足，如果您的条件满足，那么您将以return true返回，反之亦然。所以通过这种方式你可以实现你想要的目标

Answer 3

您可以在表单上调用submit（），这将触发浏览器验证。它没有任何返回值，但会自动提交表单。您的代码未显示您之后需要执行其他操作，因此无需在OnClientClick事件中返回true或false。

document.getElementById("form1").submit();

但除非你遗漏了一部分，否则用

替换链接按钮会更容易

<input type="submit" runat="server" />

Answer 4

我建议您使用jQuery.validationEngine。

 <html>
 <head>
<script src="../ValidationFiles/jquery.validationEngine-en.js"></script>
<script src="../ValidationFiles/jquery.validationEngine.js"></script>
<link href="../ValidationFiles/validationEngine.jquery.css rel="stylesheet"/>   
<script type="text/javascript">
  jQuery(document).ready(function () {
 jQuery("#form1").validationEngine();
   });
</script>
 </head>
<body>
<form id="#form1">
<asp:TextBox ID="txtEmployeeAddress" runat="server" CssClass="form-control validate[required]"></asp:TextBox>
<asp:Button ID="btnFooterAddPopupSave" runat="server" class="btn btn-primary" Text="Add Category" OnClientClick="return jQuery('#form1').validationEngine();" OnClick="btnFooterAddPopupSave_Click" />
</form>
</body>
</html>

注意：For Required在Element的类中添加“validate [required]”。

Answer 5

如果您不想使用任何JavaScript插件，并且您要定位的浏览器支持它，则可以使用HTML5 form.checkValidity()和form.reportValidity()方法。您可以在HTML5 form support查看针对各个浏览器的此功能支持 - 请参阅表单验证部分。

使用示例如下：

UserFile

在asp.Net LinkButton OnClientClick上触发html5表单验证

5 个答案:

在asp.Net LinkBut​​ton OnClientClick上触发html5表单验证

5 个答案:

在asp.Net LinkButton OnClientClick上触发html5表单验证