2013-01-21 16 views
26

Masz problemy z pobieraniem wtyczki jQuery Validate, aby grać ładnie.Dlaczego <form> ma atrybut NoValidate?

model

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

Układ

<!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> 

Zobacz

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> 
} 

Kiedy przesłać komunikat o błędzie pojawi się na chwilę, a następnie tworzą słupki tylne i tak.

Jedno zauważyłam, czego nie widzieliśmy wcześniej jest to, że zawiera znaczników „novalidate” atrybut

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

od bitów czytałem, to atrybut HTML5, który uniemożliwia weryfikację. Więc tak, właśnie to powoduje. Zakładam.

Pytanie brzmi - dlaczego bejesus jest dodawany do formularza? Nie prosiłem o to!

edit: zrobiłem trochę kopania na podstawie odpowiedzi @rob „s wydaje się jQuery validate rzuca wyjątek, stąd odświeżenie strony ..

Debugging Outcome

to jquery.validate 1,10

+3

Jak na stronie pluginu [] (http://bassistance.de/jquery-plugins/jquery-plugin-validation/), wersja 1.10 ma testowane tylko przez jQuery 1.8. – Sparky

Odpowiedz

5

To było naprawdę źle sformułowane pytanie z mojej strony.

Zasadniczo problem nie był wcale atrybutem novalidation (jak powiedział @robasta).

Nie mogłem uzyskać jQuery 1.9 i jQuery.Validate 1.10, aby ładnie grać. Przejście z powrotem do jQuery 1.83 naprawiło to od razu, wszystko działało, jak się spodziewałem.

+1

Wersja 1.10 został przetestowany tylko przez jQuery 1.8.x – Sparky

+0

. Nauczy mnie bycia dokładniejszym przed zabawą, naprawdę chciałem tylko wypróbować Boostrap :) – glosrob

+0

lepiej zgłosisz błąd, pomógł mi (i mam nadzieję, że wiele inne) z jedną galerią zdjęć – vladkras

24

Atrybut novalidate jest dodawana przez jquery.validate linii 32:

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

Jeśli używasz HTML5 then remove the attribute:

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

w twojej web.config, upewnij się, że:

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

Upewnij się także, że nie są one w komentarzu.

+0

Dobry krzyk - ale obaj tam są i nie skomentowali: – glosrob

+0

zaktualizowałem odpowiedź. – robasta

+6

Aby wyjaśnić, rozumiem, że "novalidate" powinien tam być, aby wyłączyć sprawdzanie poprawności HTML5, ponieważ nie chcesz, aby zarówno walidacja HTML5 (zaimplementowana w przeglądarce), jak i walidacja jQuery były próbami sprawdzania poprawności formularza, ponieważ będą tworzyć duplikaty popupów o błędach, które będą nieporządne. – AaronLS

2

Po szybkim skanowaniu i przeczytaniu poprzednich komentarzy zauważam, że jeśli masz atrybut data-val=true na którymkolwiek z elementów formularza, właściwość novalidate zostanie automatycznie wstawiona przez jquery.validate.

Ma to sens, ponieważ jeśli używasz tych atrybutów, oznacza to, że nie masz zamiaru przejść przez walidację, stąd atrybut novalidate; jednak czytając o właściwości html5 novalidate na w3schools, można nadpisać domyślną novalidate; nowy skrypt jquery.validate musi to uwzględnić.

Myślę, że to chuda, daj mi znać, jeśli ktoś się z tym zgadza.

1

zmiana

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

do

// Add novalidate tag if HTML5. 
    if (typeof (Worker) !== "undefined") { this.attr('novalidate', 'novalidate'); 
Powiązane problemy