时间戳

首页 > 解决方案 > 如何根据选择的单选按钮显示和验证文本框

javascript - 如何根据选择的单选按钮显示和验证文本框

问题描述

我有这 2 个基于单选按钮选择的单选按钮，我应该显示文本框，也应该验证文本框。如果我选择单选按钮是并且文本框为空，那么我应该显示错误。使用下面的代码，我只能显示和隐藏文本框，但无法验证文本框。请提出解决方案。

模型 ：

public class CustomerModel  
{
  [Required(ErrorMessage = "Please select subscribe option")]
  public bool Subscribe {get; set;}

  public string Email {get; set;}
}

看法 ：

 function ShowHideDiv() {
            var chkYes = document.getElementById("Yes");
            var dvtext = document.getElementById("dvtext");
            dvtext.style.display = chkYes.checked ? "block" : "none";
        }

        $(function () {
            warningel = document.getElementById('lbError');
            $("#radio").submit(function () {
                if ($('#Yes').is(':checked') && !$.trim($('#Email').val())) {
                    warningel.innerHTML = "Please Enter Email";
                    return false;
                }
            });
        });
 <div class="form-group col-md-12 ">
                    <label class="required" for="subscribe">Email Subsciption</label>
                    <span >Yes : <input type="radio" value="Yes" name="Subscribe" id="chkYes" onclick="ShowHideDiv()" /></span>
                    <span >No : <input type="radio" value="No" name="Subscribe" id="chkNo" onclick="ShowHideDiv()" /></span>
          @Html.ValidationMessageFor(model => model.Subscribe)
                </div>
                <div id="dvtext" style="display: none">
                    <label for="email" class="required">Enter Email</label>
                    <div style="width:300px;">
                        @Html.TextBoxFor(model => model.Email)
                         <div id='lbError' style="color: red;"></div>
                        @Html.ValidationMessageFor(m => m.Email)
                    </div>
                </div>

标签： javascriptc#asp.net-mvcrazor

解决方案

我认为更简洁的解决方案是仅使用 javascript 来显示/隐藏文本框并让 MVC 处理验证，您可以通过从IValidatableObject.

假设您在isValidEmail()某处有一个自定义方法来检查提供的字符串：

public class CustomerModel : IValidatableObject
{
    public bool Subscribe {get; set;}
    public string Email {get; set;}

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        if (Subscribe && !isValidEmail()) 
        {
            yield return new ValidationResult("Please enter valid email address");
        }
    }
}

推荐阅读