C# ASP.NET – User keystroke validation and input character into correct place

So here is what I found to validate as the user types.

It still shows what they typed before it removes it but it was as close as I could get.

Also if anyone knows a way to pass the parameters in from the eventclick without having to declare them in the function so I can reuse this on multiple fields passing in the different variables would be great!

Basically I setup a session for per user bases that will hold the value of the field when a key is pressed down in memory and when released it will pass the new value through a validation check and if it passes then all good otherwise it resets the value with what is in the memory storage.

Under the program.cs I added

--code

//Use for session control
builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();

builder.Services.AddDistributedMemoryCache();
builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromMinutes(30);
});

var app = builder.Build();
// end the Session Control 

// Add the Session Control then go to SessionController
app.UseSession();

Under the Session Controller

--code

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Products.Models;

namespace Products.Controllers
{
    public class SessionController : Controller
    {
        private readonly IHttpContextAccessor _contextAccessor;
        public SessionController(IHttpContextAccessor contextAccessor)
        {
            _contextAccessor = contextAccessor;
        }
        public FieldModel EventHandler(FieldModel model)
        {
            string sessionName = model.sessionName;
            
            if (model.keystroke == "down")
            {
                //This is passing in the current value of the field.  Just need to save it in the Session
                string fieldString = JsonConvert.SerializeObject(model);
                _contextAccessor.HttpContext.Session.SetString(sessionName, fieldString);
            }
            else if (model.keystroke == "up")
            {
                //TODO - This is passing in the new character. Get the session
                FieldModel priorModel = new FieldModel();
                string fieldString = _contextAccessor.HttpContext.Session.GetString(sessionName);
                priorModel = JsonConvert.DeserializeObject<FieldModel>(fieldString);

                bool validate = false;
                //TODO - This is passing in the new character.  Validate the value for the field
                if (model.fieldType == "time")
                {
                    if (model.fieldNewValue.Length < 5)
                        validate = true;
                }
                //TODO - If validation passes allow the update
                if (validate == true)
                {
                    //fieldString = JsonConvert.SerializeObject(model);
                    //_contextAccessor.HttpContext.Session.SetString(sessionName, fieldString);
                    
                }
                //TODO - If validation fails reset the field to the current value
                else
                {
                    //fieldString = JsonConvert.SerializeObject(priorModel);
                    //_contextAccessor.HttpContext.Session.SetString(sessionName, fieldString);
                    model = priorModel;
                }
            }
            return model;
        }
    }
}

For the webpage view I used the following code --code

<script>

    function FieldValidatorD() {
        let sessionName_ = `time`;
        let fieldID_ = `time`;
        let fieldType_ = `time`
        let keystroke_ = `down`
        let input = document.querySelector(`#` + fieldID_).value;        
        let json = {
          sessionName: sessionName_,
          fieldID: fieldID_,
          fieldType: fieldType_,
          fieldCurrentValue: input,
          fieldNewValue: input,
          keystroke: keystroke_
        };        
     //console.log(json);
        $.ajax({
            type: `json`,
            data: json,
            url: `/Session/EventHandler`,
            async: false,
            success: function (data) {
                //console.log(data);
                //console.log(data.fieldNewValue);
            }
        })
    };
    function FieldValidatorU() {
        let sessionName_ = `time`;
        let fieldID_ = `time`;
        let fieldType_ = `time`
        let keystroke_ = `up`
        let input = document.querySelector(`#`+fieldID_).value;
        let json = {
            sessionName: sessionName_,
            fieldID: fieldID_,
            fieldType: fieldType_,
            fieldCurrentValue: input,
            fieldNewValue: input,
            keystroke: keystroke_
        };
        //console.log(json);
        $.ajax({
            type: `json`,
            data: json,
            url: `/Session/EventHandler`,
            async: false,
            success: function (data) {
               //console.log(data);
               //console.log(data.fieldNewValue);
                //fill in the textbox by injecting the html into the field
                $(`#` + fieldID_).val(data.fieldNewValue);
            }
        })
    };
 

</script>