locked
asp.net mvc model validation for Checkboxfor field, red box doesnot show? RRS feed

  • Question

  • User-1651604128 posted

    Hi,

    I am using mvc model validation with ValidationAttribute, here is:

    this is the checkboxfor field in razor view

    @Html.CheckBoxFor(model => model.InvIndicator)

    this is the model side:

    [CheckInvList]

    public Boolean InvIndicator { get; set; }

    here is the ValidationAttribute

    public class CheckInvList : ValidationAttribute
        {
            protected override ValidationResult IsValid(object value, ValidationContext validationContext)
            {
                var model = (ProdViewModel)validationContext.ObjectInstance;
               
                if (model.ProdType == "F" && model.InvIndicator == false)
                {
                    return new ValidationResult("Indicator is required.");
                }
               
                return ValidationResult.Success;
            }
        }

    I am using validation summary in razor view, I can see the validation message works well. But the only thing is that the checkboxfor does not show in red triangle when that field left blank (which means false),

    I have other Editorfor or Dropdownlist fields are all shows red color with invalid data, are there any difference compare between Checkboxfor and other Editorfor fields in validation?

    Wednesday, December 5, 2018 3:40 PM

Answers

  • User1520731567 posted

    Hi Peter Cong,

    If you add another EditorFor field as mandatory field and leave it blank, you should understand what I mean, the EditorFor field shows red color properly, but not for checkbox field.

    As @mgebhard said,if you use MVC default verification,it does not affect the control's own style, EditorFor will not be affected too.

    Like the picture:

    In your project,it seems that there are other code or other validation controls that don't support changing the style of checkbox.

    I suggest You could Imitate the style of EditorFor  at the front end, making checkbox change the similar style.

    For example:

    https://stackoverflow.com/a/32152496

    https://stackoverflow.com/a/38855638

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 13, 2018 6:15 AM

All replies

  • User1520731567 posted

    Hi Peter Cong,

    Peter Cong

    I have other Editorfor or Dropdownlist fields are all shows red color with invalid data, are there any difference compare between Checkboxfor and other Editorfor fields in validation?

    In my opinion, there is no difference.

    Do you mean your checkbox do not display red error message?

    I suggest you could add some breakpoints on your IsValid function,

    check if this line if (model.ProdType == "F" && model.InvIndicator == false) is true

    And check if you added verification under @Html.CheckBoxFor,like:

                    @Html.CheckBoxFor(m => Model.InvIndicator)
                    @Html.ValidationMessageFor(model => Model.InvIndicator, "", new { @class = "text-danger" })

    If you still have questions,please post more details.

    Best Regards.

    Yuki Tao

    Thursday, December 6, 2018 8:34 AM
  • User-1651604128 posted

    Hi Peter Cong,

    Peter Cong

    I have other Editorfor or Dropdownlist fields are all shows red color with invalid data, are there any difference compare between Checkboxfor and other Editorfor fields in validation?

    In my opinion, there is no difference.

    Do you mean your checkbox do not display red error message?

    I suggest you could add some breakpoints on your IsValid function,

    check if this line if (model.ProdType == "F" && model.InvIndicator == false) is true

    And check if you added verification under @Html.CheckBoxFor,like:

                    @Html.CheckBoxFor(m => Model.InvIndicator)
                    @Html.ValidationMessageFor(model => Model.InvIndicator, "", new { @class = "text-danger" })

    If you still have questions,please post more details.

    Best Regards.

    Yuki Tao

    HI Yuki, thank you for your help,

    actually, it is Not the validation message, as I mentioned since I am using  error summary, the error message is showing properly in the  error message summary section.

    (I don't want to show the error message on beside of the field, that is why I didn't use the @Html.ValidationMessageFor).

    Since I display the validation on validation summary section, for invalid data field will show a red color on that field, it is a good feature to show user the invalidated field.

    But this works for EditFor field, Not the checkboxFor field, I need to Checkboxfor field to show red color as EditFor field.

    Any idea? 

    Friday, December 7, 2018 1:18 AM
  • User1520731567 posted

    Hi Peter Cong,

    Sorry for the late.

    But this works for EditFor field, Not the checkboxFor field, I need to Checkboxfor field to show red color as EditFor field.

    If you would like to show validation message by @Html.ValidationSummary, Both EditFor and checkboxFor can display error messages.

    Please try to use the code in httpPost action,like

     [HttpPost]
            public ActionResult Index(xxxModel model)
            {
                if (ModelState.IsValid)
                {
                   ...
                    return View(model);
                }
                else { //If invalid
                    var msg = string.Empty;
                    foreach (var value in ModelState.Values)
                    {
                        if (value.Errors.Count > 0)
                        {
                            foreach (var error in value.Errors)
                            {
                                msg = msg + error.ErrorMessage;
                            }
                        }
                    }
                    ModelState.AddModelError(string.Empty, msg);//@Html.ValidationSummary will show the msg
                    return View(model);
                }
            }

    How my demo works:

    If you still have some questions,please post more details,such as:model,view and controller.

    Best Regards.

    Yuki Tao

    Wednesday, December 12, 2018 2:18 AM
  • User-1651604128 posted

    Hi Peter Cong,

    Sorry for the late.

    Peter Cong

    But this works for EditFor field, Not the checkboxFor field, I need to Checkboxfor field to show red color as EditFor field.

    If you would like to show validation message by @Html.ValidationSummary, Both EditFor and checkboxFor can display error messages.

    Please try to use the code in httpPost action,like

     [HttpPost]
            public ActionResult Index(xxxModel model)
            {
                if (ModelState.IsValid)
                {
                   ...
                    return View(model);
                }
                else { //If invalid
                    var msg = string.Empty;
                    foreach (var value in ModelState.Values)
                    {
                        if (value.Errors.Count > 0)
                        {
                            foreach (var error in value.Errors)
                            {
                                msg = msg + error.ErrorMessage;
                            }
                        }
                    }
                    ModelState.AddModelError(string.Empty, msg);//@Html.ValidationSummary will show the msg
                    return View(model);
                }
            }

    How my demo works:

    If you still have some questions,please post more details,such as:model,view and controller.

    Best Regards.

    Yuki Tao

    Hi Yuki,

    Thanks for your help again,

    sorry for the confusing,  I think I should post a screenshot to help you understand my problem, but I do not know how to attach an image in this post.

    Actually, my question is very simple,I am not asking how to add error msg in summary section, that works well.

    let's use your screenshot, when you left 1001 field blank, apart from the error message showing in the summary section, that checkbox should show in red color, but in your case, it is not.

    If you add another EditorFor field as mandatory field and leave it blank, you should understand what I mean, the EditorFor field shows red color properly, but not for checkbox field.

    Wednesday, December 12, 2018 6:12 PM
  • User475983607 posted

    The checkbox label is affected not the checkbox itself which is a browser control.  You'll need to do an internet search for different CSS styles you can apply to a checkbox or find a client API.  It is up to you to write code to assign the style.

    https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css

    Wednesday, December 12, 2018 6:31 PM
  • User1520731567 posted

    Hi Peter Cong,

    If you add another EditorFor field as mandatory field and leave it blank, you should understand what I mean, the EditorFor field shows red color properly, but not for checkbox field.

    As @mgebhard said,if you use MVC default verification,it does not affect the control's own style, EditorFor will not be affected too.

    Like the picture:

    In your project,it seems that there are other code or other validation controls that don't support changing the style of checkbox.

    I suggest You could Imitate the style of EditorFor  at the front end, making checkbox change the similar style.

    For example:

    https://stackoverflow.com/a/32152496

    https://stackoverflow.com/a/38855638

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 13, 2018 6:15 AM
  • User-1651604128 posted

    Hi Peter Cong,

    Peter Cong

    If you add another EditorFor field as mandatory field and leave it blank, you should understand what I mean, the EditorFor field shows red color properly, but not for checkbox field.

    As @mgebhard said,if you use MVC default verification,it does not affect the control's own style, EditorFor will not be affected too.

    Like the picture:

    In your project,it seems that there are other code or other validation controls that don't support changing the style of checkbox.

    I suggest You could Imitate the style of EditorFor  at the front end, making checkbox change the similar style.

    For example:

    https://stackoverflow.com/a/32152496

    https://stackoverflow.com/a/38855638

    Best Regards.

    Yuki Tao

    Thanks a lot Yuki,

    This solution may resolve my question,

    https://stackoverflow.com/questions/38855331/how-to-change-border-color-of-checkboxes-in-javascript/38855638#38855638

    much appreciated,

    Thursday, December 13, 2018 12:38 PM