Agregar asterisco a los campos obligatorios en Bootstrap 3

166

Mi HTML tiene una clase llamada .requiredque se asigna a los campos obligatorios.

Aquí está el HTML:

<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
    <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
    <div class="form-group required">
       <label class="col-md-2 control-label">Username</label>
       <div class="col-md-4">
         <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
       </div>
    </div>
    <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">&#160;</label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-primary">
              <span class="glyphicon glyphicon-star"></span> Sign Me Up!
           </button>
        </div>
    </div>
</form>

Agregué lo siguiente a mi CSS;

.form-group .required .control-label:after {
  content:"*";color:red;
}

Aún así, eso no da un rojo *alrededor de los campos obligatorios. ¿Que me estoy perdiendo aqui? ¿No hay una forma directa en Bootstrap 3 para presentar *los campos obligatorios?

EDITAR

Los *términos y condiciones no aparecen inmediatamente en una casilla de verificación. ¿Cómo arreglar esto?

ingrese la descripción de la imagen aquí

— tormenta cerebral
fuente

2

Por favor marque la pregunta respondida.

— LoveAndHappiness

283

Usar .form-group.requiredsin el espacio.

.form-group.required .control-label:after {
  content:"*";
  color:red;
}

~~Editar:~~

Para la casilla de verificación, puede usar la pseudo clase: not (). Agregue el * requerido después de cada etiqueta a menos que sea una casilla de verificación

.form-group.required:not(.checkbox) .control-label:after, 
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
   content:"*";
   color:red;
}

Nota: no probado

Deberías usar la clase .text o apuntarla de otra manera, probablemente, prueba este html:

<div class="form-group required">
   <label class="col-md-2 control-label">&#160;</label>
   <div class="col-md-4">
      <div class="checkbox">
         <label class='text'> <!-- use this class -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

Ok tercera edición:

CSS de vuelta a lo que era

.form-group.required .control-label:after { 
   content:"*";
   color:red;
}

HTML:

<div class="form-group required">
   <label class="col-md-2">&#160;</label> <!-- remove class control-label -->
   <div class="col-md-4">
      <div class="checkbox">
         <label class='control-label'> <!-- use this class as the red * will be after control-label -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

— Timvp
fuente

3

Probé el editado, pero no funcionó. ¿Puedes revisar por favor?

— Tormenta cerebral

Cambie

— algunas cosas

1

¿No parece ser BS3 genérico, sino CSS personalizado? También me parece receptivo, así que tal vez esté bien agregar esto (a su archivo de tema BS, por ejemplo bootstrap-theme.css).

— Roland

Para diferenciar pseudo-clase y pseudo-elementos que puede usar ::after. La especulación CSS de nivel 3 está fuera.

— Niyongabo

73

Asumiendo que así es como se ve el HTML

<div class="form-group required">
   <label class="col-md-2 control-label">E-mail</label>
   <div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>

Para mostrar un asterisco a la derecha de la etiqueta:

.form-group.required .control-label:after { 
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 8px;
    top:7px;
}

O a la izquierda de la etiqueta:

.form-group.required .control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -15px;
}

Para hacer un bonito asterisco rojo grande, puede agregar estas líneas:

font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;

O si está utilizando Font Awesome, agregue estas líneas (y cambie la línea de contenido):

font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";

— th3uiguy
fuente

1

top:7px;causará los problemas si la etiqueta es de varias líneas. Sería mejor reemplazarlo con, margin-top: -4px;por ejemplo.

— sasha_gud

7

.form-group .required .control-label:afterprobablemente debería ser .form-group.required .control-label:after. La eliminación del espacio entre .form-group y .required es el cambio.

— Jeremy Cook
fuente

¡Gracias! también funciona para bootstrap 2.3 con .control-group.required .control-label:after { content:"*"; color:red; }

— editor el

4

Las otras dos respuestas son correctas. Cuando incluye espacios en sus selectores CSS, se dirige a elementos secundarios, por lo que:

.form-group .required {
    styles
}

Está apuntando a un elemento con la clase de "requerido" que está dentro de un elemento con la clase de "grupo de formularios".

Sin el espacio, apunta a un elemento que tiene ambas clases. 'obligatorio' y 'grupo de formulario'

— Corey
fuente

Este es un tema separado de su pregunta original. Pero tu CSS está haciendo exactamente lo que le estás diciendo. Está poniendo el asterisco con el campo de etiqueta (que para sus términos y condiciones está en blanco) y no el campo de entrada. Si desea que aparezcan juntos, deberá agruparlos en el HTML. Pero entonces tienes un campo de etiqueta en blanco que es malo. Simplemente abandonaría la etiqueta en los términos y condiciones, pero mantendría las validaciones.

— Corey

1

Este CSS funcionó para mí:

.form-group.required.control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -10px;
}

y este HTML:

<div class="form-group required control-label">
  <label for="emailField">Email</label>
  <input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>

— tomahawk
fuente

Es un poco extraño tener la etiqueta de control en el div que contiene tanto la etiqueta como la entrada.

— Devlin Carnate