logo标签列表

在Asp.Net LinkButton的OnClientClick事件中触发html5表单验证

javascriptjqueryasp.nethtml
13

我有一个网络表单应用程序

在主页面上，我有这个表单

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

并且在我的页面.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>

我想调用一个Javascript函数来模拟按钮提交，如果某些验证未通过，则返回false并在表单字段上显示错误信息。
    function checkForm()
    {
         ?
    }

我该怎么做？

我脑海中有一个想法，但如果您能展示更多关于LinkButton代码后台的内容，我将能够更好地帮助您。 - JKOU
5个回答
3
您可以创建自己的验证并返回该值。您需要将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>

但是您也可以使用内置的验证控件和验证摘要来完成相同的操作。
<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。
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，反之亦然。因此，您可以通过这种方式实现您想要的结果。
2
您可以在表单上调用submit()，这会触发浏览器验证。它没有返回值，但会自动提交表单。您的代码并没有显示需要在此之后执行其他操作，因此在OnClientClick事件中返回true或false是不必要的。
document.getElementById("form1").submit();

除非你遗漏了一部分内容，否则更简单的方法是用一个链接按钮替换它。
<input type="submit" runat="server" />
2

我建议您使用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>

注意：对于必填项，在元素的类中添加“validate [required]”。{{link1：Example is Here}}。
2
如果您不想使用任何JavaScript插件，并且您所针对的浏览器支持它，您可以使用HTML5 form.checkValidity() 和 form.reportValidity() 方法。您可以在此处检查各个浏览器对此功能的支持情况HTML5表单支持 - 请参阅表单验证部分。
例如用法如下：
function checkForm() {
  var form = $("#<%= form1.ClientID %>")[0];
  if (!form.checkValidity()) {
    if (form.reportValidity) {
      //Show errors on form fields
      form.reportValidity();
    }
    else {
      //Fall-back for browsers that don't support reportValidity()
    }
    return false;
  }
  return true;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接