web-dev-qa-db-fra.com

Pourquoi <form> reçoit-il l'attribut NoValidate?

Avoir du mal à obtenir le plugin jQuery Validate pour jouer à Nice.

Modèle

public class FooVM
{
    [Required]
    public string Name { get; set; }
}

Disposition

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="@Url.Content("~/scripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/scripts/jquery-migrate-1.0.0.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/scripts/jquery.validate.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/scripts/bootstrap.min.js")" type="text/javascript"></script>
        <link href="@Url.Content("~/content/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
        <title>@ViewBag.Title</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="span12">
                <div class="navbar">
                    <div class="navbar-inner">
                        <a class="brand" href="#">idoneit</a>
                        <ul class="nav">
                            <li class="menu-link">@Html.ActionLink("Home", "index", "bar")</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="span12 error-container">

            </div>
            <div class="span12 main-body">
                @RenderBody()
            </div>
        </div>
    </div>
    </body>
</html>

Vue

model bootstrapvalidate.Models.FooVM
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm("add", "bar", FormMethod.Post, new { @class = "form-horizontal" }))
{
    <fieldset>
        @Html.ValidationSummary()
        <legend>Testing Bootstrap & Validate</legend>
        <div class="control-group">
            <label for="Name" class="control-label">Name</label>
            <div class="controls">
              @Html.TextBoxFor(x => x.Name) 
            </div>
            <button type="submit" class="btn">Add!</button>
        </div>
    </fieldset>
}

Lorsque je soumets, le message d'erreur s'affiche brièvement, puis le formulaire est renvoyé de toute façon.

Une chose que j'ai remarquée et que je n'ai jamais vue auparavant est que le balisage contient l'attribut 'novalidate'

<form action="/bar/add" class="form-horizontal" method="post" novalidate="novalidate">

D'après les bits que j'ai lus, il s'agit d'un attribut HTML5 qui empêche la validation. Alors oui, c'est ce qui en est la cause, je suppose.

La question est - pourquoi le bejesus est-il ajouté au formulaire? Je ne l'ai pas demandé!

edit: a fait un peu de fouille sur la base de la réponse de @rob, il semble que jquery validate lève une exception, d'où la publication.

Debugging Outcome

c'est jquery.validate 1.10

asp.net-mvchtml5jquery-validate
31
glosrob

C'était vraiment une question mal formulée de ma part, je pense.

Essentiellement, le problème n'était pas du tout l'attribut novalidation (comme l'a dit @robasta).

Je n'ai pas pu utiliser jQuery 1.9 et jQuery.Validate 1.10 pour jouer correctement. Le retour à jQuery 1.83 l'a corrigé immédiatement, tout fonctionnant comme je m'y attendais.

6
glosrob

L'attribut novalidate est ajouté par la ligne 32 jquery.validate:

// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');

Si vous utilisez HTML5, puis supprimez l'attribut :

$("#contactForm").validate();
$("#contactForm").removeAttr("novalidate");

Dans votre web.config, assurez-vous que vous avez:

 <appSettings>        
    ...
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

Assurez-vous également qu'ils ne sont pas commentés.

30
robasta

À partir d'une analyse rapide et de la lecture des commentaires précédents, je remarque que si vous avez le data-val=true attribut sur l'un des éléments du formulaire, la propriété novalidate sera automatiquement insérée par jquery.validate.

Cela a du sens car si vous utilisez ces attributs, il y a quelque chose que vous n'avez pas l'intention de passer par la validation, d'où l'attribut novalidate; cependant, en lisant la propriété html5 novalidate sur w3schools, vous pouvez remplacer la valeur par défaut novalidate; le nouveau jquery.validate le script doit en tenir compte.

Je pense que c'est maigre, faites-moi savoir si quelqu'un est d'accord.

4
Nick LeBlanc

changement

// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');

à

// Add novalidate tag if HTML5.
    if (typeof (Worker) !== "undefined") { this.attr('novalidate', 'novalidate');
1
legendJSLC