ASP.Net如何在提交后删除/忽略特定元素的验证?

时间:2019-03-22 14:38:32

标签: c# jquery html css

我有一个ASP.Net Core项目,该项目具有一个简单的表单,具有两个单选按钮。一个单选按钮具有一个下拉菜单,另一个具有文本框。如果用户选择第一个单选按钮,则当用户按下“提交”按钮时,我想删除/忽略该文本框的验证(由于其为空)。反之亦然,如果用户选择第二个选项,则我想从下拉列表中删除/忽略验证。我尝试了在StackOverflow上找到的一堆jQuery方法,但没有一个起作用。

型号:

  public class EnrollmentModel : BaseModel
  {
    ...
    public bool PriceOption { get; set; }

    [Required(ErrorMessage = "Please select a rate plan")]
    public string SelectedRatePlan { get; set; }

    public IEnumerable<SelectListItem> RatePlans { get; set; }

    [Required]
    public string CustomRate { get; set; }
    ...
    }
  }

查看:

  <div class="form-group">
    <div class="row">
      @Html.RadioButtonFor(x => Model.PriceOption, true, htmlAttributes: new { @id = "comed", @class = "col-md-1" })
      @Html.Label("Use price from current rate plans")
      @Html.DropDownListFor(x => Model.SelectedRatePlan, new SelectList(Model.RatePlans, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "rateplans", style = "width:100px;", required = "Select Rate Plan" })
      @Html.ValidationMessageFor(x => Model.SelectedRatePlan, "", new { @class = "text-danger" })

    </div>
  </div>
  <div class="form-group">
    <div class="row">
      @Html.RadioButtonFor(x => Model.PriceOption, false, htmlAttributes: new { @id = "custom", @class = "col-md-1" })
      @Html.Label("Enter custom price")
      @Html.TextBoxFor(x => Model.CustomRate, htmlAttributes: new { @id = "customrate", @class = "form-control", style = "width:100px;" })
      @Html.ValidationMessageFor(x => Model.CustomRate, "", new { @class = "text-danger" })
    </div>
  </div>

屏幕截图:

enter image description here

呈现的内容:

  div class="form-group">
  <div class="row">
    <input checked="checked" class="col-md-1" data-val="true" data-val-required="The PriceOption field is required." id="comed" name="PriceOption" type="radio" value="True" />
    <label for="Use_price_from_current_ComEd_rate">Use price from current rate plan"</label>
    <select class="form-control" data-val="true" data-val-required="Please select a rate plan" id="rateplans" name="SelectedRatePlan" required="Select Rate Plan" style="width:100px;"><option value="">select</option>
      <option value="B70">B70</option>
      <option value="B71">B71</option>
      <option value="B90">B90</option>
      <option value="B91">B91</option>
      <option value="H70">H70</option>
      <option value="H71">H71</option>
      <option value="H90">H90</option>
      <option value="H91">H91</option>
      <option value="R70">R70</option>
      <option value="R71">R71</option>
      <option selected="selected" value="R90">R90</option>
      <option value="R91">R91</option>
    </select>
    <span class="field-validation-valid text-danger" data-valmsg-for="SelectedRatePlan" data-valmsg-replace="true"></span>

  </div>
  </div>
  <div class="form-group">
  <div class="row">
    <input class="col-md-1" id="custom" name="PriceOption" type="radio" value="False" />
    <label for="Enter_custom_price">Enter custom price</label>
    <input class="form-control" data-val="true" data-val-maxlength="The field CustomRate must be a string or array type with a maximum length of &#x27;7&#x27;." data-val-maxlength-max="7" data-val-required="The CustomRate field is required." id="customrate" name="CustomRate" style="width:100px;" type="text" value="" />
    <span class="field-validation-valid text-danger" data-valmsg-for="CustomRate" data-valmsg-replace="true"></span>
  </div>
  </div>

我遇到了有关实现从ValidationAttribute,IClientModelValidator派生的自定义验证器的事情,还是有更简单的方法来实现我想要的?谢谢。

1 个答案:

答案 0 :(得分:1)

Expressive Annotations是我在生产项目中多次使用的库。只需在您的视图模型上指定条件,就可以了。

所以您会得到类似的东西

using ExpressiveAnnotations.Attributes;//reference at the top

public class EnrollmentModel : BaseModel
{
    ...
    public bool PriceOption { get; set; }

    [Required(ErrorMessage = "Please select a rate plan")]
    public string SelectedRatePlan { get; set; }

    public IEnumerable<SelectListItem> RatePlans { get; set; }

    [RequiredIf("PriceOption == true")]
    public string CustomRate { get; set; }
    ...
}