RequiredFieldValidator wyświetla miejsca: wstawia tekst

Question

Mam RequiredFieldValidator z Display="Dynamic" na moim ASP.NET WebForm. Przydzieliłem mu klasę przy użyciu właściwości CssClass. Chcę, aby komunikat o błędzie był wyświetlany przy użyciu display: block, więc umieściłem to na klasie css w moim arkuszu stylów.

Niestety, walidator umieszcza ekran: wstawiany na elemencie na stronie internetowej, który skutecznie nadpisuje wartość mojego arkusza stylów.

Czy mogę się tego pozbyć?

Edit:

Właśnie uświadomiłem sobie, dlaczego to nie działa. Ustawienie wartości Display="Dynamic" w walidatorze powoduje, że podczas renderowania ustawia on style="display: none" na znaczniku span. Biblioteka .NET javascript następnie przełącza styl inline elementu między none i inline. Po prostu działa weryfikator dynamiczny. Aby wyświetlić element blokowy, należy zmodyfikować sposób sprawdzania poprawności zdarzenia po stronie klienta. czy jest to możliwe do zrobienia?

Answer 1

Może to pomóc:
http://caliberwebgroup.blogspot.com/2009/02/overriding-javascript-in-webresourceaxd.html

Answer 2

Niezwykle hacky rozwiązanie ja kiedyś (czego nie jestem dumny, ale to działało) był zawinąć RequiredFieldValidator w <div>, która jest elementem blokowym; dlatego też, mimo że RequiredFieldValidator jest wbudowany, znajduje się wewnątrz bloku div, więc w większości przypadków będzie skutecznie wyświetlany jako display: block.

Powiedziałem, że to było hacky!

Answer 3

Już miałem wypróbować rozwiązanie css, ale po przeczytaniu tego, co napisałeś (zaktualizowałeś), myślę, że mogę trzymać się mojego. Musiałem już skonfigurować mój weryfikator na serwerze z innych powodów, więc po prostu sprawdzam typ kontrolny "controlToValidate", a następnie dla formantów typu textbox dodam znacznik <br /> na początku wiadomości.

np.
// Inline (if configured)
myvalidator.Text = "<br />My message";

// Normal message and validation summary (if configured)
myvalidator.ErrorMessage = "My Message";

To utrzymuje podział wiersza z renderowania w podsumowaniu walidacji, wciąż patrząc w prawo na moje wiadomości inline.

Uważam, że podejście Blackomen jest również dobre, ale musi być również selektywnie stosowane.

Answer 4

Istnieje proste rozwiązanie, które będzie działać teraz i w przyszłości.

1) Dodać klasę do weryfikatora
2) zastosowanie jquery dodać element wewnętrzny do zakresu weryfikatorów lub użyć JavaScript

function wrapValidators() { 

    $('.input-error').wrapInner('<span class="block" />'); 
} 

3) dodać css do klasy 'blok' „display: blok "

Answer 5

Znalazłem rozwiązanie, które działa przez przesłonięcie.Netto metoda ValidatorUpdateDisplay() w JavaScript, i należy umieścić przed zamykającym tagiem.

<script type="text/javascript"> 
    function ValidatorUpdateDisplay(val) 
    { 
     if (typeof (val.display) == "string") 
     { 
      if (val.display == "None") 
      { 
       return; 
      } 
      if (val.display == "Dynamic") 
      { 
       val.style.display = val.isvalid ? "none" : "block"; 
       return; 
      } 
     } 
     if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1)) 
     { 
      val.style.display = "inline"; 
     } 
     val.style.visibility = val.isvalid ? "hidden" : "visible"; 
    } 
</script> 

Answer 6

Używanie selektora atrybutów CSS i! Ważne, że to zrobiłem. Musiałem użyć selektora "zawiera", aby działał w FF, ale teraz przetestowałem go w IE10, FF i Chrome i jak na razie działa. To naprawdę proste. Oto próbka walidator w mojej strony aspx:

<asp:RequiredFieldValidator runat="server" ID="rfvRequired" ErrorMessage="This is required.<br/>This is line 2" ControlToValidate="tbRequired" ValidationGroup="CommonAttributesValidationGroup" SetFocusOnError="True" CssClass="valerror" Display="Dynamic"></asp:RequiredFieldValidator> 

Następny mam styl valerror.

span.valerror[style*="inline"] 
{ 
    display:block !important; 
    background-color: Yellow; 
    border: 1px solid #cccccc; 
    font-size:.9em; 
} 

To wszystko. Jak to działa: kiedy rozpiętość zmienia styl z "display: none" na "display: inline" selektor atrybutu na kopnięciach zakresu i wymusza blok. Wystarczy, że wprowadzisz JEDNĄ pozycję CSS podobną do tej powyżej i upewnij się, że robisz każdy walidator tej klasy.

Answer 7

Jedną z opcji jest unosić element, aby akt elementem „bardziej przypomina bloku”.

HTML

<div class="form-group clearfix"> 
    <asp:CustomValidator runat="server" Display="Dynamic" CssClass="help-block" /> 
</div> 

CSS

span.help-block { 
    float: left; 
    width: 100%; 
}