无法使用C＃asp.net验证空的输入字段

Question

我无法使用c＃asp.net验证是否为空输入字段。 实际上，我有两个输入字段。 我需要显示空白输入字段的验证消息。 我做了一些编码。 当我在没有提供任何输入的情况下单击“提交”按钮时，我收到第一次输入的错误消息， ie, Name field can not be blank并且该输入字段上有一个红色边框。 当我向第一个输入字段提供任何输入并再次单击提交按钮时，将出现第二个输入字段的错误消息，但是问题是边框颜色在第一个输入字段中显示为红色，不应出现。 我在下面解释我的代码。

index.aspx：

<div class="widget-title">Doctor Registration <span id="validationMessage" runat="server" ></span></div>
<div class="row doctorlist-form">
    <div class="col-md-6 bmargindiv1">
        <label for="doctorname" accesskey="N"><span class="required">*</span> Name</label>
        <div class="col-md-2 padding-zero">
        <asp:DropDownList ID="txtdoctorprefix" name="doctorname" runat="server">
        <asp:ListItem Value="Dr." Selected="True" Text="Dr."></asp:ListItem>
        <asp:ListItem Value="Mr." Text="Mr."></asp:ListItem>
        <asp:ListItem Value="Mrs." Text="Mrs."></asp:ListItem>
        </asp:DropDownList>
        </div>
        <div class="col-md-10 padding-zero"><asp:TextBox ID="txtDoctorName" runat="server" oninput="detectName('dName');" ></asp:TextBox></div>
        <div class="clearfix"></div>
    </div>
    <div class="col-md-6 bmargindiv1">
        <label for="gender" accesskey="G"><span class="required">*</span> Gender</label>
        <asp:DropDownList ID="txtGender" name="grnder" runat="server" onchange="selectGender('gender');">
        <asp:ListItem Text="Select your Gender" Selected="True"></asp:ListItem>
        <asp:ListItem Text="Male" Value="male" ></asp:ListItem>
        <asp:ListItem Text="Female" Value="female"></asp:ListItem>
        </asp:DropDownList>
    </div>
    <div class="col-md-12 bmargindiv1">
        <asp:Button runat="server" Text="Submit" class="button" ID="doctorDetails" OnClick="doctorDetails_Click" />
    </div>
</div>
<script type="text/javascript">
    function detectName(nameid) {
         var type = nameid;
         console.log(type);
         switch (type) {
             case 'dName':
                 $('#<%=txtDoctorName.ClientID %>').css('border-color', '#e3e3e3');
                 $('#<%=validationMessage.ClientID %>').empty();
                 break;
         }
     }
     function selectGender(type) {
         var type = type;
         switch (type) {
             case 'gender':
                 $('#<%=txtGender.ClientID %>').css('border-color', '#e3e3e3');
                 $('#<%=validationMessage.ClientID %>').empty();
                 break;
         }
     }
</script>

index.aspx.cs：

protected void doctorDetails_Click(object sender, EventArgs e)
{
   // Response.Write(txtDoctorName.Text.Trim().Length);
    if (txtDoctorName.Text.Trim().Length == 0 )
    {
        validationMessage.InnerText = "Name field can not be blank.";
        validationMessage.Style.Add("color", "red");
        txtDoctorName.Focus();
        txtDoctorName.BorderColor = System.Drawing.Color.Red;
        return;
    }
    if (txtGender.SelectedIndex==0)
    {
        validationMessage.InnerText = "Gender field can not be blank.";
        validationMessage.Style.Add("color", "red");
        txtGender.Focus();
        txtGender.BorderColor = System.Drawing.Color.Red;
        return;
    }
}

我的问题是，当总计字段为空白并且我单击提交按钮时，错误消息正确显示，但是与此同时，当我向第一文本字段提供一些输入，然后再次单击提交按钮时，第一条if语句也在执行第二个if语句不应该发生。 在这种情况下，仅应执行if语句。 请帮助我解决此问题。

Answer 1

我强烈建议使用ASP.NET验证控件。 例如：

ASPX页面

<asp:ValidationSummary ID="vs" runat="server" ValidationGroup="Default" />

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

<asp:CustomValidator 
    ID="cv" 
    runat="server" 
    ControlToValidate="txtDoctorName"
    ValidateEmptyText="true"
    Text="*" 
    OnServerValidate="ValidateRequired"
    ErrorMessage="Please enter a valid Doctor Name."
    ValidationGroup="Default" />

背后的代码

protected void SubmitOnClick(object sender, EventArgs e)
{
    if (!Page.IsValid) return;
    ...
}

protected void ValidateRequired(object source, ServerValidateEventArgs args)
{
    args.IsValid = !string.IsNullOrEmpty(args.Value.Trim());
}

ValidationSummary将为您提供所有验证错误的完整列表，而不是一次列出一个。

如果要继续使用此方法，要固定第一个文本框上的红色边框不消失，每次单击按钮时都需要重置边框颜色：

protected void doctorDetails_Click(object sender, EventArgs e)
{
    // Clear all properties each time the button is clicked
    validationMessage.InnerText = string.Empty;
    txtDoctorName.BorderColor = System.Drawing.Color.Black;
    txtGender.BorderColor = System.Drawing.Color.Black;

    if (txtDoctorName.Text.Trim().Length == 0 )
    {
    ...
}

您可以在Debug（调试）模式（F5）中启动项目，在doctorDetails_Click方法上放置一个断点，然后逐步使用F10查看正在发生的事情的更多详细信息。

Answer 2

由于您在服务器（运行）上运行的控件上显式设置了边框的颜色-我的强烈直觉是ViewState保留了这些特性。

您可以通过反转代码以检查第一个输入之前的第二个输入来测试该行为，您可能会看到红色边框现在保留在第二个输入上，而（仅）第一个输入未通过验证

我同意@GoatBreeder，即您使用了buitin 验证控件 ，