ASP.NET Core Unobtrusive Client Side Validation Form onsubmit fires even on validation failure (en anglais)

Question

Note : Ceci est lié à .NET Core v2.0. Vous pouvez trouver des articles connexes, mais ils ne traitent pas du problème auquel je suis confronté.

Je pose ma candidature Côté client discret avec le code ci-dessous :

<form asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" onsubmit="showPleaseWait()" >
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Username" class="control-label"></label>
        <input asp-for="Username" class="form-control" placeholder="Username"  />
        <span asp-validation-for="Username" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Password" class="control-label"></label>
        <input asp-for="Password" value="" class="form-control" placeholder="Password" />
        <span asp-validation-for="Password" class="text-danger"></span>
    </div>
    <div class="form-group">
        <button type="submit"  class="btn btn-success btn-lg" style="margin:auto;display:block">Log in</button>
    </div>
</form>

Ce qui est bien, c'est qu'il effectue la validation côté client.

Cependant, form.onsubmit est déclenché même si la validation échoue. Par conséquent, mon showPleaseWait est appelée. Je pense qu'elle ne devrait pas être appelée puisque le formulaire n'est pas encore soumis en raison de l'échec de la validation.

Voici le modèle :

public class LoginViewModel
{
    [Required]        
    public string Username { get; set; }

    [Required]
    [DataType(DataType.Password)]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
}

Toute solution ou solution de contournement serait très appréciée.

Answer 1

Les plugins jQuery Unobtrusive Validation et jQuery Validation de niveau supérieur ne bloquent pas le déclenchement de l'événement submit, ce qui, comme vous l'avez noté, signifie que votre plugin showPleaseWait() sera appelée chaque fois que l'utilisateur tentatives pour soumettre le formulaire.

Pour ce faire, il est possible d'interroger l'état de la validation à partir de l'application showPleaseWait avant d'essayer d'exécuter votre propre code. Voici un exemple :

function showPleaseWait() {
    if ($("form").valid()) {
        // Your code here.
    }
}

Cette implémentation tire parti de la fonction de validation de jQuery. valid qui :

Vérifie si le formulaire sélectionné est valide ou si tous les éléments sélectionnés sont valides.

J'ai utilisé un simple $("form") ci-dessus, mais il peut être nécessaire d'être plus spécifique si vous avez plusieurs formulaires sur une même page, etc.