1

Tengo un formulario de Login y me gustaría saber como se puede hacer para validar los campos, solo cuando se pulse el botón del formulario en la parte del cliente antes de enviar la información al servidor

Ahora mismo me lo válida también cuando el campo pierde el foco o pones un valor incorrecto en el campo.

El modelo está definido de la siguiente manera:

public class LoginViewModel
{
    [Required(ErrorMessage = nameof(SharedResource.Resources.CampoObligatorio))]
    [RegularExpression(Constants.Constants.Regex.RegexCIF, ErrorMessage = nameof(SharedResource.Resources.CIFIncorrecto))]
    [Display(Name = nameof(SharedResource.Resources.CIF))]        
    public string DniCif { get; set; }

    [Required(ErrorMessage = nameof(SharedResource.Resources.CampoObligatorio))]
    [EmailAddress(ErrorMessage = nameof(SharedResource.Resources.FormatoIncorrecto))]
    [Display(Name = nameof(SharedResource.Resources.CorreoElectronico))]
    public string CorreoElectronico { get; set; }

    [Required(ErrorMessage = nameof(SharedResource.Resources.CampoObligatorio))]
    [DataType(DataType.Password)]
    [StringLength(100, ErrorMessage = nameof(SharedResource.Resources.CaracteristicasPasswordMsg), MinimumLength = 6)]
    [Display(Name = nameof(SharedResource.Resources.Password))]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = nameof(SharedResource.Resources.ConfirmaPassword))]
    [Compare(nameof(Password), ErrorMessage = nameof(SharedResource.Resources.PasswordNoCoincidentesMsg))] 
    [NotMapped]
    public string ConfirmPassword { get; set; }

}

Y en la parte HTML:

  <form asp-page="./Signin" id="idFormLogin" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" role="form" class="form-horizontal">

                @Html.Raw(System.Web.HttpUtility.HtmlDecode(Html.ValidationSummary(true, "", new { @class = "text-danger" }).ToHtmlString()))
                <div class="form-group text-left">
                    <div class="col-md-12">
                        @Html.LabelFor(m => m.LoginModel.DniCif, new { @class = "control-label" })
                        @Html.TextBoxFor(m => m.LoginModel.DniCif, new {@class = "form-control", @maxlength = "11" })
                        @Html.ValidationMessageFor(m => m.LoginModel.DniCif, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group text-left">
                    <div class="col-md-12">
                        @Html.LabelFor(m => m.LoginModel.CorreoElectronico, new { @class = "control-label" })
                        @Html.TextBoxFor(m => m.LoginModel.CorreoElectronico, new {@class = "form-control", @type = "email" })
                        @Html.ValidationMessageFor(m => m.LoginModel.CorreoElectronico, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group text-left">
                    <div class="col-md-12">
                        @Html.LabelFor(m => m.LoginModel.Password, new { @class = "control-label" })
                        @Html.PasswordFor(m => m.LoginModel.Password, new {  @class = "form-control", @type = "password" })
                        @Html.ValidationMessageFor(m => m.LoginModel.Password, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    <button id="btnLogin" class="btn btn-primary btn-lg btn-block login-btn" type="submit">@SharedLocalizer.GetLocalizedHtmlString(nameof(Resources.SharedResource.Resources.IniciarSesionBtn))</button>
                </div>
            </form>

¿Como se puede hacer la validación solo al pulsar el botón? Me da igual si es con Javascript o no

Gracias

2
  • Con "al pulsar el botón" te refieres a antes del submit (en el cliente), o después del submit (al llegar al servidor). Commented el 30 sept. 2019 a las 13:08
  • En la parte del cliente, perdón por no especificarlo.
    – Sergio
    Commented el 30 sept. 2019 a las 13:14

1 respuesta 1

0

Si tu proyecto es del tipo ASP.NET Core, la validación por defecto que se aplica es jquery-validation, en conjunción con los DataAnnotations del Modelo y los @Html.ValidationMessageFor de la Vista.

En tu caso podrías modificar el comportamiento por defecto de jquery-validation para que no se valide al introducir los datos o al perder el foco en un control.

La solución estaría en incluir el siguiente Script en tu Vista:

<script type="text/javascript">
    $.validator.setDefaults({
         onkeyup: false,
         focusInvalid: false,
         onfocusout: false
    });
</script>
2
  • 1
    Perfecto, me ha funcionado como quería. Muchas gracias!
    – Sergio
    Commented el 30 sept. 2019 a las 15:09
  • @Sergio: Estupendo!, recuerda siempre valorar las respuestas que te han servido para solucionar tu pregunta. Commented el 30 sept. 2019 a las 15:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.