web-dev-qa-db-fra.com

RequiredFieldValidator place display: inline sur le texte

J'ai une RequiredFieldValidator avec Display="Dynamic" sur mon formulaire Web ASP.NET. Je lui ai assigné une classe en utilisant la propriété CssClass. Je veux que le message d'erreur soit affiché en utilisant display: block. Je l'ai donc placé dans la classe css de ma feuille de style.

Malheureusement, le validateur place un affichage: en ligne sur l'élément de la page Web, remplaçant efficacement la valeur de ma feuille de style.

Puis-je me débarrasser de ça?

Modifier:

Je viens de comprendre pourquoi cela ne fonctionne pas. Lorsque vous définissez Display="Dynamic" sur un validateur, cela a pour effet de définir style="display: none" sur la balise span lors du rendu. La bibliothèque javascript .net bascule ensuite le style en ligne de l'élément entre none et inline. C’est simplement ainsi que fonctionne le validateur dynamique. Donc, pour que cela s'affiche en tant qu'élément de bloc, je devrai modifier le fonctionnement de la validation des événements côté client. Est-il possible de faire ça?

asp.netwebforms
25
Pete

Peut-être que cela peut vous aider:
http://caliberwebgroup.blogspot.com/2009/02/overriding-javascript-in-webresourceaxd.html

3
Pieter Nijs

En utilisant le sélecteur d'attribut CSS et! Important, je l'ai fait J'ai dû utiliser le sélecteur "contient" pour le faire fonctionner en FF, mais maintenant je l'ai testé dans IE10, FF et Chrome et jusqu'à présent, il fonctionne. C'est vraiment simple. Voici un exemple de validateur dans ma page 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>

Ensuite, j'ai un style pour valerror.

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

C'est ça. Comment ça marche: quand le span change le style de "display: none" à "display: inline", le sélecteur d'attribut sur le span entre en action et le force à être un bloc. Vous avez juste besoin de faire UNE entrée CSS comme celle ci-dessus et assurez-vous de faire chaque validateur de cette classe.

34
David

Une solution extrêmement astucieuse que j’avais utilisée jadis (et dont je ne suis pas fier, mais qui a fonctionné) consistait à envelopper RequiredFieldValidator dans un <div>, qui est un élément de bloc; Par conséquent, même si votre RequiredFieldValidator est en ligne, il se trouve dans un div de bloc, de sorte qu'il apparaîtra sous la forme display: block dans la plupart des cas.

Je vous ai dit que c'était hacky!

29
Henry C

J'ai trouvé une solution qui fonctionne en surchargeant la méthode .net ValidatorUpdateDisplay() en JavaScript et qui doit être placée avant la balise close body.

<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>
2
Paul Shoesmith

Une option consiste à faire flotter l'élément pour le faire agir "plutôt comme un bloc".

HTML

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

CSS

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

J'étais sur le point d'essayer une solution CSS, mais après avoir lu ce que vous avez posté (mis à jour), je pense pouvoir m'en tenir à la mienne. Je devais déjà configurer mon validateur sur le serveur pour d'autres raisons. Je vérifie donc simplement le type de contrôle du "controlToValidate", puis pour les contrôles de type zone de texte, j'ajoute une balise <br /> à l'avant du message.

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

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

Cela empêche le saut de ligne de s'afficher dans le récapitulatif de validation, tout en maintenant la pertinence de mes messages en ligne.

Je pense que l'approche de Blackomen est également bonne, mais elle doit également être appliquée de manière sélective.

1
Zambodi

Il suffit de mettre float: left à votre css

En utilisant la solution ci-dessus si votre champ requis est affiché avant votre contrôle, ajoutez simplement nouvelle balise de ligne <br/>entre votre contrôle et le validateur de champ requis

0
Yogesh

Il existe une solution simple qui fonctionnera maintenant et à l’avenir.

1) Ajouter une classe au validateur
2) Utilisez jquery pour ajouter un élément interne à la plage du validateur ou utilisez javascript.

function wrapValidators() {

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

3) ajouter css à la classe 'block' "display: block"

0
dotnetnoob