Validation Form without using EdiForm in Blazor Wasm/Server

I am working on a Blazor application where I need to include a text editor and a multi-select dropdown in my form. Since Blazor's built-in EditForm does not support components like a multi-select dropdown out of the box, I opted to use JavaScript interop (IJSRuntime) to initialize these controls.

Here is the code for my form:

<form @onsubmit="SubmitCreate"><div class="row"><div class="form-group col-sm-12 col-md-12 col-xl-4 col-l-4 col-4"><label for="Title" class="form-label">Title</label><input type="text" class="form-control" id="Title" placeholder="Enter page ..." @bind="dto.Title" /></div><div class="form-group col-sm-12 col-md-12 col-xl-4 col-l-4 col-4"><label for="metaTitle" class="form-label">Meta Title</label><input type="text" class="form-control" id="metaTitle" placeholder="Enter meta ..." @bind="dto.MetaTitle" /></div><div class="form-group col-sm-12 col-md-12 col-xl-4 col-l-4 col-4"><label for="Slug" class="form-label">Slug</label><input type="text" class="form-control" id="Slug" placeholder="Enter Slug ..." @bind="dto.Slug" /></div><div class="form-group col-sm-12 col-md-12 col-xl-4 col-l-4 col-4 pt-2"><label for="Excerpt" class="form-label">Excerpt</label><input type="text" class="form-control" id="Excerpt" placeholder="Enter excerpt ..." @bind="dto.Excerpt" /></div><div class="form-group col-sm-12 col-md-12 col-xl-4 col-l-4 col-4 pt-2"><label for="keywords" class="form-label">Keywords</label><select id="choices" class="form-control" multiple @onchange="OnKeywordsChanged">                @foreach (var key in AllKeywords)                {<option value="@key.Id.ToString()">@key.Word</option>                }</select></div></div><div class="form-group col-12 py-4"><label for="summernote" class="form-label">Content</label><textarea type="text" class="form-control" id="summernote" placeholder="Enter Content ..." @bind="dto.Content"></textarea></div><button type="submit" class="btn btn-info p-2">Submit</button><button type="submit" class="btn btn-secondary p-2" @onclick="BackToList">Back</button></form>

    protected override async Task OnAfterRenderAsync(bool firstRender)    {        // id=> summernote        // id => choices        if (!firstRender || !IsJavaScriptInitialized)        {            await JRuntime.InvokeVoidAsync("SummernoteActivator");            await JRuntime.InvokeVoidAsync("ChoicesActivator");            IsJavaScriptInitialized = true;        }    }

Issues:Multi-Select Dropdown ():

Blazor's built-in InputSelect does not natively support multiple selections.I currently use JavaScript to enhance this dropdown for multi-selection functionality. However, this approach prevents me from using Blazor's DataAnnotations for validation.

Text Editor:

The is enhanced with a JavaScript-based WYSIWYG editor (e.g., Summernote).Similar to the multi-select issue, this requires JavaScript initialization, making it hard to integrate with Blazor's EditForm and its validation mechanisms.

What I’ve Tried:Using IJSRuntime to initialize the multi-select dropdown and text editor.Binding the @bind attribute for dto.Keywords and dto.Content to the respective controls.

What I’m Looking For:

A Blazor-native way to achieve multi-select dropdown and WYSIWYG text editing without relying on external component libraries like Telerik or Syncfusion.Ideas to integrate these custom controls with Blazor's EditForm and validation system, or alternative approaches to maintain validation.

Constraints:I cannot use third-party component libraries due to project requirements.I aim to keep the solution as lightweight and dependency-free as possible.

Notes:

If this is not possible natively with Blazor, I’m open to suggestions for minimal custom implementations or any patterns that would help achieve this functionality while keeping Blazor's validation intact.