c# - 在引发 onClick 事件之前，如何使用图像按钮在 ASP.NET 中验证表单？

Question

这可能是一个愚蠢的问题，但我是这里的初学者..

我在 asp.net 中创建了一个表单，它的所有字段都在单击图像按钮时使用验证控件进行验证。它工作正常。之后我向按钮添加了一个事件。这是该按钮的代码。

<asp:ImageButton ID="Submit" runat="server" OnClick="submit_Clicked" ValidationGroup="AddSchoolValidationGroup" CausesValidation="true" ImageUrl="~/Styles/images/submit-btn.png" OnClientClick="submitClicked" />

该事件的目的是将表单中的所有值提交到数据库。我的问题是，在将 onClick 事件添加到按钮后，验证尚未发生。我希望这些 onClick 事件仅在表单被验证时引发成功。任何人都可以指导我..在此先感谢。

Answer 1

确保您对所有验证控件使用相同的验证组。此外，您可以使用OnClientClick事件来调用验证。

<asp:ImageButton ID="Submit" runat="server" OnClick="submit_Clicked" ValidationGroup="AddSchoolValidationGroup" CausesValidation="true" ImageUrl="~/Styles/images/submit-btn.png"  OnClientClick="return Page_ClientValidate('AddSchoolValidationGroup');"  />

Answer 2

你可以使用javascript函数

    function validateForm() {
        if (document.getElementById('txtName').value == '') 
         { 
             ValidatorEnable(document.getElementById("rfvName"), true) // rfvName is id of validator
               return false; }
    }

并在客户端单击图像按钮时调用该函数

   <asp:ImageButton ID="Submit" runat="server" OnClientClick="validateForm();" OnClick="submit_Clicked" ValidationGroup="AddSchoolValidationGroup" CausesValidation="true" ImageUrl="~/Styles/images/submit-btn.png" /> 

Answer 3

您需要在提交之前验证页面。请为按钮添加属性。

protected void Page_Load(object sender, EventArgs e)
{
   Submit.Attributes.Add("onclick", "javascript:if(Page_ClientValidate('AddSchoolValidationGroup')){return true;}else{return false;}");
}

由于您在 onclient click 中有一个方法“submitClicked”，您可以在 Page_ClientValidate 中调用相同的方法并删除现有的“OnClientClick”属性。

protected void Page_Load(object sender, EventArgs e)
{
   Submit.Attributes.Add("onclick", "javascript:if(Page_ClientValidate('AddSchoolValidationGroup')){submitClicked(); return true;}else{return false;}");
}

Answer 4

替换OnClientClick="submitClicked"为OnClientClick="return submitClicked();"

function submitClicked()
{
    if (document.getElementById('txtname') != '') {
        return true;
    }
    else {
        alert('Please Enter Name');
        return false;
    }
}

因此，在验证所有验证之前，不会调用服务器端事件。