Necesito usar JS (o jQuery) para restablecer un formulario. Funciona bien si completa los campos y hace clic en Restablecer. El problema comienza cuando envío el formulario con al menos un campo que tiene un error de modelo. Cuando se devuelve el formulario con errores de modelo y hago clic en restablecer, los campos que no tenían errores de modelo no se restablecen.

¿Qué está sucediendo aquí y cómo puedo hacer que todos los campos siempre se restablezcan, independientemente de si hubo o no errores en el modelo? Además, me gustaría que los errores del modelo desaparezcan al reiniciar también.

El siguiente GIF muestra que el campo que resalto no se restablece:

I want highlighted field to reset

Html

@model SampleViewModel
@{
    ViewData["Title"] = "Home Page";
}


<script>
    function ResetFormWithJS() {
        document.getElementById('FormEyeDee').reset();
    }
</script>

<center>
    <form id="FormEyeDee"asp-action="Index" method="post">
        Name:
        <input asp-for="Name" />
        <span asp-validation-for="Name" class="text-danger"></span>
        <hr />
        Email:
        <input asp-for="Email" />
        <span asp-validation-for="Email" class="text-danger"></span>
        <hr />
        <input type="submit" value="Submit" />
        <input type="reset" onclick="ResetFormWithJS();" />
    </form>
    <br>
</center>

Controlador:

public class HomeController : Controller
{
    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Index(SampleViewModel Model)
    {
        if (!ModelState.IsValid)
        {
            return View("Index", Model);
        }

        return RedirectToAction("Index");
    }
}

Modelo

public class SampleViewModel
{
    [Required]
    public string Name { get; set; }
    [Required]
    public string Email { get; set; }
}
1
Lukas 23 jun. 2020 a las 01:08

2 respuestas

¿Qué está sucediendo aquí y cómo puedo hacer que todos los campos siempre se restablezcan, independientemente de si hubo o no errores en el modelo? Además, me gustaría que los errores del modelo desaparezcan al reiniciar también.

Para cumplir el requisito, puede intentar hacer referencia a _ValidationScriptsPartial.cshtml para admitir la validación del lado del cliente, lo que también ayudaría a evitar un viaje de ida y vuelta innecesario al servidor.

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Resultado de la prueba

enter image description here

0
Fei Han 23 jun. 2020 a las 09:56

Si está buscando una solución JavaScript pura, intente esto:

function ResetFormWithJS() {
    document.querySelector("[asp-for='Name']").value = "";
    document.querySelector("[asp-for='Email']").value = "";
}

O con JQuery:

function ResetFormWithJS() {
    $("[asp-for='Name']").val("");
    $("[asp-for='Email']").val("");
}
0
Nanoo 22 jun. 2020 a las 22:21