Dropdown validation for default value - html

Question

I need help on how to validate the default value on a select dropdown list. What I have now doesn't show the validation on the view because I have '--Select--' as the first value. What can I do to get the validation to work. It works for Order, Title, URL but not for the select dropdown. I added a value = "0" and added Range attribute in view model.
Edit: I have to change this so it uses validation summary instead of using the tags for each field but I still can't get the validation messages to show.
<form id="form-create-link" method="post" asp-controller="Link"
asp-action="CreateLink">
<div class="form-group col-md-8">
**<div asp-validation-summary="ModelOnly" id="validation-error" hidden
class="text-danger custom-validation-summary"></div>
</div>**
<input id="link-id" asp-for="#Model.LinkId" type="hidden" />
<input name="FetchCategories" type="hidden"/>
<div class="form-group col-md-8 col-lg-4">
<div class="form-group">
#{
var authorizedCommitteeTypes = await Model.CommitteeType
.ToSelectListAsync(AuthorizationService, User,
AuthRequirements.AdminCommitteeType);
if (authorizedCommitteeTypes.Count == 1)
{
<input id="committeeType" name="committeeType" type="hidden"
value="#authorizedCommitteeTypes.FirstOrDefault()?.Value" />
}
else
{
<label class="control-label">Committee Type</label>
<select id="add-edit-committee-type"
name="committeeType"
asp-for="#Model.CommitteeType"
asp-items="#authorizedCommitteeTypes"
class="form-control">
</select>
}
}
</div>
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">Category</label>
#{
if (Model != null && Model.AvailableCategories != null)
{
var availableCategories =
new SelectList(
Model.AvailableCategories.OrderBy(c => c.Order),
dataValueField: "CategoryId",
dataTextField: "Title",
selectedValue: Model.CategoryId);
<select id="dropdown-linkCategories" required
asp-for="#Model.CategoryId"
asp-items="#availableCategories"
class="form-control">
<option>-- Select --</option>
</select>
}
else
{
<select id="dropdown-linkCategories"
class="form-control">
<option>-- Select --</option>
</select>
}
}
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">Title</label>
<input id="title" asp-for="Title" name="Title" class="form-control" />
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">Display Order</label>
<div>
<input id="order" asp-for="Order" name="Order" class="form-control" />
</div>
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">URL</label>
<input id="url" asp-for="URL" name="URL" class="form-control" />
</div>
<div class="form-group col-md-8 col-lg-12">
<label class="control-label">Description</label>
<textarea class="rtextDescription" name="Description" id="Description"
row="1" cols="60"
data-val-maxlength-max="200" asp-for="Description"
data-val-maxlength="Max length for Description is 200"></textarea>
</div>
<div class="form-group col-md-8 col-lg-12">
<label class="check " >
Add Another
<input type="checkbox" name="AddAnother">
<span class="checkmark"></span>
</label>
</div>
#{
if (Model.LinkId == 0)
{
<div class="form-group col-md-12">
<input type="submit" id="link-submit"
class="btn btn-forum col-sm-12 col-md-4 col-lg-4"
value="Add & Return to Links" />
<a asp-area="Admin"
asp-controller="Link"
asp-action="Index"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to
Links</a>
</div>
}
else
{
<div class="form-group col-md-8 col-lg-12">
<input type="submit" value="Save" id="edit-submit"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2" />
<a asp-area="Admin"
asp-controller="Link"
asp-action="Index"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to
Links</a>
</div>
}
}
</form>

Answer 1

According to your code, it seems that the View Model contains the selected properties (such as: CommitteeType, CategoryId), after selecting item from the DropDownlist, we could get the selected value from these properties. So, to validate the DropDownList, we could add the validate attribute to these selected properties.
You could refer the following sample, it will create a custom validation attribute to check whether the selected value is valid or not:
Models:
public class Categories
{
public int CategoryID { get; set; }
public string CategoryName { get; set; }
}
public class Order
{
[Required]
public int OrderId { get; set; }
[Required]
public string Title { get; set; }
[CheckSelctedValue(ErrorMessage ="Please select a valid category")]
public string CategoryId { get; set; } //DropDownList selected value
public List<Categories> AvailableCategories { get; set; } //DropDownList select items.
}
Here, create a custom validation attribute to check whether the selected value is valid or not.
public class CheckSelctedValue : ValidationAttribute
{
public override bool IsValid(object value)
{
int number;
//get the selected value and according to the condition to check whether the value is valid or not.
//try to convert the selected value to int.
bool success = int.TryParse(value.ToString(), out number);
//if the number is 0, it means user select the first item.
if (success && number !=0)
{
return true;
}
else
{
return false;
}
}
}
Controller:
public IActionResult CreateOrder()
{
Order o = new Order();
o.OrderId = 1001;
o.Title = "AA";
o.AvailableCategories = new List<Categories>()
{
new Categories(){ CategoryID=101, CategoryName="Meat"},
new Categories(){ CategoryID=102, CategoryName="Fruit"},
new Categories(){ CategoryID=102, CategoryName="Vegetables"}
};
o.CategoryId = "101";
return View(o);
}
[HttpPost]
public IActionResult CreateOrder(Order order)
{
//used to set the select items for the dropdownlist.
order.AvailableCategories = new List<Categories>()
{
new Categories(){ CategoryID=101, CategoryName="Meat"},
new Categories(){ CategoryID=102, CategoryName="Fruit"},
new Categories(){ CategoryID=102, CategoryName="Vegetables"}
};
if (ModelState.IsValid)
{
}
return View(order);
}
Code in the View Page (add value="0" to the dropdownlist first option):
#model netcore5.Models.Order
<div class="row">
<div class="col-md-4">
<form asp-action="CreateOrder">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="OrderId" class="control-label"></label>
<input asp-for="OrderId" class="form-control" />
<span asp-validation-for="OrderId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CategoryId" class="control-label"></label>
<select id="dropdown-linkCategories" required
asp-for="CategoryId"
asp-items="#(new SelectList(Model.AvailableCategories, "CategoryID","CategoryName", Model.CategoryId))"
class="form-control">
<option value="0">-- Select --</option>
</select>
<span asp-validation-for="CategoryId" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
The output as below:
Edit
I updated my code. I have to use the validation summary that is at the
top of the form but I can't get the validation messages to show.
<div asp-validation-summary="ModelOnly" id="validation-error" hidden class="text-danger custom-validation-summary"></div>
The issue is related to the above code.
First, if we want to show the validation message summary, we should set the asp-validation-summary attribute to All, instead of ModelOnly. More detail information, see The Validation Summary Tag Helper.
Second, since you are using hidden attribute, it will hide the validation message, so, try to remove the hidden attribute.
After updated, the code should be as below:
<div asp-validation-summary="All" id="validation-error"
class="text-danger custom-validation-summary"></div>