Um ein ValidationSummary-mit einer box über CSS

Durch Standard-Html.ValidationSummary() erzeugt HTML so:

<span class="validation-summary-errors">There were some errors...</span>
<ul class="validation-summary-errors">
   <li>First Name too long</li>
   <li>Invalid Email Address</li>
</ul>

Möchte ich wählen Sie die gesamte Validierung Zusammenfassung und fügen Sie einen Begrenzungsrahmen um es per CSS, so dass ich bin das hinzufügen einer CSS-Klasse wie folgt aus: 

.validation-summary-errors{
background-color:#D9FFB2;
border: 1px solid #5CBA30;
color:#000000;
margin-top:15px;
margin-bottom:15px;
}

Nun das problem ist, dass das zieht die separaten Boxen, um die Validierung Zusammenfassung Mitteilung und jeder Fehlermeldung. Sicherlich nicht das, was ich im Sinn hatte.

Kann ich fügen Sie ein div um die Zusammenfassung wie diese, aber dies führt in eine leere rote box, wenn es keine Fehler bei der Validierung, also das ist nicht der Weg: 

  <div class="my-validation-summary">
        <h2>
            <%=Model.Message%>
        </h2>
        <%= Html.ValidationSummary("There were some errors...")%>
    </div>

Ich denken kann, mehrere Möglichkeiten, um dieses Problem zu lösen:

  • Fügen Sie ein umschließendes div bedingt mit server-side tags
  • Fügen Sie ein umschließendes div via jQuery
  • Schreibe meine eigenen HtmlHelper wrapper, druckt eine CSS-freundliche ValidationSummary

Jedoch, all dies sieht ziemlich peinlich für die Lösung einer so einfachen Aufgabe. Es muss einen besseren Weg, dies zu tun. Vielleicht einige andere Schreibweise der CSS-Klasse damit ich nicht bekommen ein leeres Feld, wenn keine Validierung Zusammenfassung?

Edit: Nur um zu klären, rufe ich die html-Helfer wie diese: 

<%=Html.ValidationSummary("There were some errors...") %>

Edit 2: Den Rahmen dieser Frage war es, zu sehen, ob ich etwas übersehen tot-einfach und offensichtlich. Es scheint habe ich nicht, also werde ich einfach mein eigenes HtmlHelper Funktion, die genau meinen Anforderungen. Ich Stimme zu schließen, meine eigene Frage.

  • Haben Sie gestalten Ihre Validierung Zusammenfassung die Kontrolle? Es nicht dazu, dass die gleiche Art von Standard-als du gepostet hast, tut es.
  • Nein, ich bin nur mit der überlastung ValidationSummary-Methode (siehe edit oben) – Adrian Grigore 13 Sekunden vor
  • Ich Liebe es, wie das MVC-Quelle verfügbar ist, öffnen Sie es und schreiben Sie Ihre eigenen. viel Glück
InformationsquelleAutor Adrian Grigore | 2009-06-02
  1. 7

    Hier einige CSS, die funktioniert:

    .validation-summary-errors {
    background-color: #D9FFB2;
    border:1px solid #5CBA30;
    width: 400px;
    }
span.validation-summary-errors {
    border-bottom-color: #D9FFB2;
    display:block;
    }
ul.validation-summary-errors {
    margin:0;
    padding:0;
    border-top:none;
    }

    Möglicherweise haben Sie zu spielen, um mit dem breiten, je nach Ihrer anderen css.

    Edit nach Kommentar

    Ich geändert, ul.Validierung-Zusammenfassung-Fehler auf null aus die margin und padding und entfernt die Breite. Es sollte funktionieren, cross-browser jetzt.

    InformationsquelleAutor Emily
  2. 0

    Wenn Sie hatte eine Umhüllung div wie im zweiten code-Beispiel, das Sie zur Verfügung gestellt. Dann wäre es einfach jQuery verwenden, um "verschieben" der error-Klasse aus dem span & ul, um das äußere div.

    <html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      var className = "validation-summary-errors";
      $("." + className).removeClass(className).closest("div").addClass(className);
    });
  </script>
  <style type="text/css">
    .validation-summary-errors { border: solid 1px red; },
  </style>
</head>

<body>
  <div>
    <h2>My Modal Message</h2>
    <span class="validation-summary-errors">There were some errors...</span>
    <ul class="validation-summary-errors">
      <li>First Name too long</li>
      <li>Invalid Email Address</li>
    </ul>
  </div>
</body>
</html>

    Dieser code manipulieren das HTML so Aussehen würde...

      <div class="validation-summary-errors">
    <h2>My Modal Message</h2>
    <span class="">There were some errors...</span>
    <ul class="">
      <li>First Name too long</li>
      <li>Invalid Email Address</li>
    </ul>
  </div>
    • Wie ich schon sagte, ich weiß, es ist ziemlich einfach zu lösen, dieses problem mit jQuery. Aber das scheint wie eine ziemlich ungeschickte Lösung.
    InformationsquelleAutor jessegavin
  3. 0

    Wenn ich lese dieses Recht, und Sie wollen nur eine Grenze auf der span.validation-summary-errors (und nicht auf die inneren Inhalte), dann:

    .validation-summary-errors     {border: 0 none transparent; /* set defaults for inner */
                               }

span.validation-summary-errors {background-color:#D9FFB2;   /* sets the span */
                               border: 1px solid #5CBA30;
                               color:#000000;
                               margin-top:15px;
                               margin-bottom:15px;
                               }

    sollte es tun.

    Oder, etwas weniger zuverlässig:

    .validation-summary-errors     {background-color:#D9FFB2;
                               border: 1px solid #5CBA30;
                               color:#000000;
                               margin-top:15px;
                               margin-bottom:15px;
                               }

.validation-summary-errors > .validation-summary-errors,
.validation-summary-errors .validation-summary-errors
                               {border: 0 none transparent; /* should apply styles to */
                               }                            /* the children/descendants */
                                                            /* with the same name - untested though... */
    • Nein, ich will eine einzige Grenze, die Sie umgibt sowohl die überprüfung und Zusammenfassung der Nachrichten.
    InformationsquelleAutor David Thomas
  4. 0

    Anderen und brauchte die Lösung.

    @Html.ValidationSummary(false, "", new { @class = "***YOUR CSS CLASS***" })
    InformationsquelleAutor
Schreibe einen Kommentar