locked
Data Annotations Required textarea? RRS feed

  • 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

    Wednesday, July 31, 2019 1:53 AM

All replies

  • User-2054057000 posted

    Please check this tutorial

    Wednesday, July 31, 2019 5:57 AM
  • 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

    Wednesday, July 31, 2019 6:50 AM