Com utilitzar JavaScript per validar un formulari C# sense anotacions de dades

Validació de formularis del costat del client en C# mitjançant JavaScript

La validació del formulari és un pas crucial a l'hora de crear aplicacions web per garantir que les dades que s'envien siguin precises i completes. Els desenvolupadors solen triar entre mètodes de validació del costat del servidor o del costat del client. Un enfocament comú en C# és utilitzar DataAnnotations per a la validació del servidor. Tanmateix, és possible que això no sempre s'adapti a tots els escenaris.

En determinats casos, la validació del costat del client mitjançant JavaScript pot oferir una experiència d'usuari més dinàmica, permetent detectar errors abans d'enviar-los al servidor. Aquest enfocament evita sol·licituds innecessàries del servidor, millorant tant el rendiment com la interacció de l'usuari.

En aquest article, explorarem com validar un formulari en C# mitjançant JavaScript sense dependre dels atributs estàndard de DataAnnotations. Concretament, ens centrarem a validar diverses àrees de text i a assegurar-nos que el formulari no es recarregui abans de l'enviament.

Si el formulari ja té dades existents i esborreu un dels camps, és possible que trobeu problemes en què el formulari es torni a carregar sense mostrar les alertes esperades. Aprofundirem en per què passa això i com resoldre'l mitjançant una lògica de JavaScript eficient.

Entendre la validació de formularis del costat del client amb JavaScript i C#

En aquest article, ens centrem a crear un mecanisme senzill de validació de formularis mitjançant JavaScript per a un projecte C# ASP.NET Core. El formulari té diverses àrees de text on s'espera que l'usuari introdueixi informació, i utilitzem JavaScript per garantir que tots els camps s'omplen correctament abans d'enviar el formulari. En evitar les anotacions de dades de C#, implementem una validació de front-end personalitzada que es produeix a l'instant, evitant que la pàgina es torni a carregar innecessàriament. Aquest mètode millora el rendiment i l'experiència de l'usuari reduint les trucades innecessàries al servidor.

Per aconseguir-ho, el validateForm() La funció JavaScript comprova totes les àrees de text dins del formulari. La comanda querySelectorAll() s'utilitza per reunir tots els elements de l'àrea de text, que després s'iteren mitjançant un bucle. Si es troba alguna àrea de text buida (és a dir, el valor és només espais o completament en blanc), el tot ple la bandera està configurada en fals. Quan això succeeix, la funció activa una alerta que notifica a l'usuari que tots els camps s'han d'omplir i l'enviament del formulari s'atura mitjançant event.preventDefault(). Això evita efectivament que la pàgina es torni a carregar, permetent a l'usuari corregir l'error.

El problema descrit sorgeix quan un usuari esborra dades d'una àrea de text i envia el formulari. En els casos en què el formulari està preemplenat i s'esborra un camp, si la nostra validació no funciona correctament, la pàgina es torna a carregar sense mostrar cap alerta. Aquest problema es produeix quan event.preventDefault() no es crida correctament, probablement perquè la lògica de validació no detecta el camp esborrat com a no vàlid. En assegurar-se que la validació de JavaScript comprova els camps buits de forma dinàmica, es pot evitar aquest problema. A més, la lògica de validació ha d'abordar possibles problemes asíncrons que poden fer que el formulari es torni a carregar abans que finalitzi la comprovació.

Finalment, la validació del costat del servidor, implementada en C# utilitzant ModelState.AddModelError(), actua com a alternativa quan la validació del client falla o s'omet. Tot i que JavaScript gestiona la majoria de les tasques de validació, la validació del servidor garanteix que no s'enviïn dades incompletes o incorrectes al servidor. Aquest enfocament de dues capes, que utilitza la validació tant del front-end com del back-end, garanteix una seguretat i un rendiment òptims de validació de formularis. Amb aquesta configuració, podem estar segurs que només es processen dades vàlides, mantenint el formulari fàcil d'utilitzar i ràpid.

function validateForm(event) {
  const form = document.getElementById('MyForm');
  let textAreas = form.querySelectorAll('textarea');
  let allFilled = true;
  for (let i = 0; i < textAreas.length; i++) {
    if (textAreas[i].value.trim() === "") {
      allFilled = false;
      break;
    }
  }
  if (!allFilled) {
    alert("All fields are required.");
    event.preventDefault();
    return false;
  }
  return true;
}

[HttpPost]
public IActionResult SaveForm(ModelExample model)
{
  if (string.IsNullOrEmpty(model.Name) ||
      string.IsNullOrEmpty(model.Name2) ||
      string.IsNullOrEmpty(model.Name3))
  {
    ModelState.AddModelError("", "All fields must be filled.");
    return View(model);
  }
  // Continue processing
  return RedirectToAction("Success");
}

function validateForm(event) {
  const form = document.getElementById('MyForm');
  let textAreas = form.querySelectorAll('textarea');
  let allValid = true;
  for (let i = 0; i < textAreas.length; i++) {
    if (textAreas[i].value.trim() === "") {
      textAreas[i].classList.add('is-invalid');
      allValid = false;
    } else {
      textAreas[i].classList.remove('is-invalid');
    }
  }
  if (!allValid) {
    event.preventDefault();
    alert("Please fill in all required fields.");
    return false;
  }
  return true;
}

[Fact]
public void TestFormValidation() {
  var controller = new MyController();
  var model = new ModelExample { Name = "", Name2 = "Valid", Name3 = "" };
  var result = controller.SaveForm(model);
  Assert.True(controller.ModelState.ContainsKey(""));
  Assert.Equal("All fields must be filled.",
                controller.ModelState[""].Errors[0].ErrorMessage);
}

Explorant les tècniques de validació de formularis de JavaScript asíncrons

Un aspecte que no hem tractat és el paper de la validació asíncrona en el maneig de formularis. La validació asíncrona permet als desenvolupadors comprovar els camps del formulari sense bloquejar l'experiència de l'usuari. Per exemple, podeu validar la singularitat d'un nom d'usuari o comprovar si existeix un correu electrònic en temps real enviant sol·licituds al servidor en segon pla, sense tornar a carregar la pàgina. Aquest mètode es pot implementar mitjançant JavaScript recuperar l'API o AJAX. Tots dos mètodes ajuden a millorar l'experiència de l'usuari oferint comentaris immediats.

En el context de la validació de formularis, les sol·licituds asíncrones permeten que la pàgina es mantingui interactiva mentre s'espera les respostes del servidor. Això pot ser útil quan es treballa amb grans conjunts de dades o regles de validació múltiples, com ara comprovar si el text introduït en un camp s'adhereix a un format específic mentre es continua validant altres camps. Combinant la validació frontal i asíncrona, els desenvolupadors poden millorar la robustesa de la validació de formularis alhora que milloren els temps de càrrega de la pàgina. La clau aquí és activar la sol·licitud asíncrona només quan sigui necessari per evitar sobrecarregar el servidor.

Quan utilitzeu la validació asíncrona en un entorn C#, també hauríeu d'assegurar-vos que la validació del servidor actua com a alternativa. Com que la validació del costat del client es pot evitar desactivant JavaScript, verifiqueu sempre les entrades del costat del servidor. D'aquesta manera, s'assegura que cap dada no vàlida es llisqui. L'aprofitament de la validació asíncrona juntament amb el JavaScript tradicional pot ajudar a aconseguir una experiència segura i fàcil d'utilitzar, sobretot quan es combina amb tècniques de gestió d'errors i optimització del rendiment adequades.