Data Annotations Required textarea?

Question

User-2029935383 posted

Hello,

I am having problems with making textarea firing the data annotation validation.

here's the html (razor) part

<div class="row mt-4">
<div class="col">
<label asp-for="consent">Some text here</label>
<textarea id="content" asp-for="consent" name="content" class="form-control" rows="25">
</textarea>
<ul class="ul-no-style">
<li><span asp-validation-for="consent" class="text-danger small"></span></li>
</ul>
</div>
</div>

and the data annotation part:

[BindProperty]
[Required(ErrorMessage = "Please do not leave the cookie consent message empty. The field is required.")]
[DataType(DataType.MultilineText)]
public string consent { get; set; }

P.S. The textarea is TinyMCE placeholder.

All other validations are firing, no problems there except this one, why?

Someone?

Thanks

Answer 1

User-2054057000 posted

Please check this tutorial. 

Answer 2

User-854763662 posted

Hi Stoyan Bukovich ,

As default :hidden fields are not validated by jquery validation plugin, and when a textarea is enhanced with tinyMce it is made : hidden (display: none). you have to change this default: $("form").data("validator").settings.ignore = "";

Try to refer to the following code :

<form method="post" id="myform">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Contact.ContactNumber" class="control-label"></label>
                <input asp-for="Contact.ContactNumber" class="form-control" />
                <span asp-validation-for="Contact.ContactNumber" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="consent">Some text here</label>
                <textarea id="content" asp-for="consent" name="consent" class="form-control" rows="25"></textarea>
                <span asp-validation-for="consent" class="text-danger small"></span>
            </div>

            <div class="form-group">
                <label asp-for="Contact.PersonId" class="control-label"></label>
                <select asp-for="Contact.PersonId" class="form-control" asp-items="ViewBag.PersonId"></select>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        tinymce.init({
            selector: '#content',
            setup: function (editor) {
                editor.on('change', function (e) {
                    tinymce.triggerSave();
                });
            }
        });
        $(function () {
           $("form").data("validator").settings.ignore = "";
  
        });
           
    </script>
}

Note : If you explicitly specify the "name" attribute of the tag helper, then the value of the “asp-validation-for” attribute must match the “name” value.

Best Regards ,

Sherry