CODEWITHSUNDEEP
c#jqueryhtmlasp.net-mvcasp.net-core
PKonstant
PKonstant

Reputation: 988

How to turn off the required message for drop-down list?

I have a form contains two radio buttons. One is associated with a drop-down and the other is associated with a text-box. If the user selects the second radio button (text-box), I would like to turn off the required message for the drop-down because when the user presses the 'Submit' button, the drop-down displays a message "Please select an item in the list."

BTW, I got it to work correctly if I just disabled the drop-down when the second radio button is selected but I was wondering if there is another way (maybe better) because when you disable the drop-down it changes it grays out.

Screenshots:

enter image description here enter image description here

Model:

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

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

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

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

View:

@using (Html.BeginForm())
{
  @Html.AntiForgeryToken()

  <fieldset>
    <div class="form-group">
      <div class="row">
        @Html.Label("Price Option:")
      </div>
    </div>
    <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 plan")
        &nbsp;
        &nbsp;
        &nbsp;
        @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")
        &nbsp;
        &nbsp;
        &nbsp;
        @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>
    <div class="form-group">
      <div class="row">
        <div class="col-md-8">
          <input type="button" value="Cancel" class="btn btn-link" onclick="location.href = '@Url.Action("Index", "Home")';" />
          &nbsp;
          <button type="submit" value="Save" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </div>
  </fieldset>
}

Upvotes: 0

Views: 1218

Answers (1)

Kiarash Alinasab
Kiarash Alinasab

Reputation: 1013

You need to specify that the field is optional in your model because bool cannot be null. add "?" after "bool" or use "Nullable" instead of "bool"

 public bool? PriceOption { get; set; }

That question mark means this property can be null.

In this page, you can find how to implement a change event on the radio button: https://devdojo.com/tutorials/how-to-detect-radio-box-change-with-jquery

and you can remove an attribute by using the following codes:

$("#selectElementId").removeAttr("required");

Upvotes: 2

Related Questions