css - validacion - validar formulario javascript html5

anula css para validación de formulario html5/ventana emergente requerida

Question

¿Cómo puedo anular la ventana emergente predeterminada para un campo obligatorio en un formulario HTML5?

Ejemplo: http://jsfiddle.net/uKZGp/ (asegúrese de hacer clic en el botón enviar para ver la ventana emergente)

El HTML

<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>

NOTA: debe ver esto con un navegador HTML5 como Google Chrome o Firefox.

Este enlace no resuelve mi pregunta, pero podría hacer que alguien piense fuera de la caja:

• http://www.the-art-of-web.com/html/html5-form-validation/
• http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html

Answer 1

Agregué una clase al tipo de entrada. y se muestra el mensaje allí. Esperanza que ayuda después de poca personalización. códec de trabajo:

document.querySelector(''#frm'').addEventListener(''submit'', e => {
  e.preventDefault();
  e.currentTarget.classList.add(''submitted'');
});

body {
  font-family: Helvetica, sans-serif;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: #ffa500;
}
form > div {
  position: relative;
  margin-bottom: 10px;
}
.theTooltip {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, visibility;
  max-width: 250px;
  border-radius: 5px;
  background-color: rgba(0,0,0,0.7);
  padding: 15px;
  color: #fff;
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate(15%, -50%);
          transform: translate(15%, -50%);
  top: 50%;
  left: auto;
  right: auto;
  bottom: auto;
  visibility: hidden;
  margin: 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  z-index: 100;
}
.theTooltip:after {
  content: '''';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  margin-top: -10px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgba(0,0,0,0.7);
}
label {
  display: inline-block;
  vertical-align: center;
}
input {
  background: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  overflow: visible;
  margin: 0;
  outline: 0;
  vertical-align: center;
  text-decoration: none;
  width: auto;
  border-radius: 3px;
  cursor: text;
  padding: 7px;
}
input:focus,
input:active {
  outline: none;
}
.submitted input:invalid {
  border: 1px solid #f00;
}
.submitted input:invalid ~ .theTooltip {
  visibility: visible;
  opacity: 1;
}
.submitted input:valid ~ .theTooltip {
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

<form id="frm" action="action">
  <div>
    <label>Email</label>
    <input type="email" required="required"/><span class="theTooltip">Invalid email</span>
  </div>
  <div>
    <button formnovalidate="formnovalidate">OK</button>
  </div>
</form>

Answer 2

Entiendo que esta es una pregunta bastante antigua, pero he encontrado esta biblioteca que creo que esto puede ser beneficioso para otros que encuentran esto.

http://afarkas.github.io/webshim/demos/index.html

Answer 3

Es imposible cambiar el estilo de validación con solo HTML5 / CSS3.

Es parte del navegador. El único atributo que resolvió cambiar es el mensaje de error al usar este ejemplo:

 document.getElementById("name").setCustomValidity("Lorum Ipsum");

Pero, como se muestra en este ejemplo: http://jsfiddle.net/trixta/qTV3g/ , puede anular el estilo del panel mediante jQuery. Este no es un complemento, es una funcionalidad central, utiliza una Webshims DOM llamada Webshims y, por supuesto, un poco de CSS para dar estilo a las ventanas emergentes.

Encontré ese ejemplo muy útil en esta publicación de errores titulada Improve form validation error panel UI .

Creo que esta es la mejor solución que puedes encontrar y la única manera de anular el panel de error básico (feo).

Saludos.

Answer 4

La validación de correo electrónico actual es actualmente una de las cosas más feas que he visto en el diseño de Google.

Sin embargo, parece estar contenido en un div estándar, por lo que puede hacer algunos cambios en él, si recuerda reiniciar estos valores.

Descubrí que puedes modificar el fondo, el tamaño de fuente y el color, el borde y la sombra, como

div {
    background: rgba(0,0,0,0.8);
    color: #333;
    font-size: 11px;
    border: 0;
    box-shadow: none;
}

Si luego sobrescribe estos para divs dentro de la etiqueta html, solo la validación se verá afectada en última instancia.

html div {
    background: rgba(0,0,0,1);
    color: #000;
    font-size: 12px;
}

Lamentablemente, algunos de los atributos clave que desea cambiar, como el margin y font-weight , no se pueden modificar.

NÓTESE BIEN. Esta técnica actualmente solo funciona para Chrome (12), es decir, no funciona para Firefox 4, Opera 11 o Safari (Win 7).

Answer 5

No estoy seguro de por qué, pero ::-webkit-validation-bubble-message { display: none; } ::-webkit-validation-bubble-message { display: none; } no funcionaría para mí. Pude obtener el resultado deseado (probado en FF 19, versión de Chrome 29.0.1547.76 m) al evitar el comportamiento predeterminado del evento no válido, que no hace burbujas.

  document.addEventListener(''invalid'', (function(){
      return function(e){
          //prevent the browser from showing default error bubble/ hint
          e.preventDefault();
          // optionally fire off some custom validation handler
          // myvalidationfunction();
      };
  })(), true);

Espero que eso ayude a los demás. Busqué en todas partes esto.

Answer 6

Para webkit, puede usar ::-webkit-validation-bubble-message . Por ejemplo para ocultarlo:

::-webkit-validation-bubble-message { display: none; }

También hay:

::-webkit-validation-bubble-arrow-clipper{}
::-webkit-validation-bubble-arrow{}
::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}

Actualización: Chrome ya no permite el estilo de las burbujas de validación de formularios: https://code.google.com/p/chromium/issues/detail?id=259050

Para firefox puedes experimentar con :-moz-placeholder {} .