javascript - validacion - Atributo de formulario HTML5 requerido. ¿Configurar mensaje de validación personalizado?

validar formulario jquery

Question

Tengo el siguiente formulario HTML5: http://jsfiddle.net/nfgfP/

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

Actualmente, cuando presiono Intro cuando ambos están en blanco, aparece un cuadro emergente que dice "Por favor, complete este campo". ¿Cómo cambiaría ese mensaje predeterminado a "Este campo no se puede dejar en blanco"?

EDIT: también tenga en cuenta que el mensaje de error del campo de contraseña de tipo es simplemente ***** . Para recrear esto, asigne un valor al nombre de usuario y presione enviar.

EDITAR : Estoy usando Chrome 10 para la prueba. Por favor haz lo mismo

Answer 1

Adaptando la respuesta de Salar a JSX y React, noté que React Select no se comporta como un campo <input/> respecto a la validación. Aparentemente, se necesitan varias soluciones para mostrar solo el mensaje personalizado y para evitar que se muestre en momentos inconvenientes.

He planteado un problema here , si ayuda algo. Here hay un CodeSandbox con un ejemplo de trabajo, y el código más importante que se reproduce aquí:

Hola.js

import React, { Component } from "react";
import SelectValid from "./SelectValid";

export default class Hello extends Component {
  render() {
    return (
      <form>
        <SelectValid placeholder="this one is optional" />
        <SelectValid placeholder="this one is required" required />
        <input
          required
          defaultValue="foo"
          onChange={e => e.target.setCustomValidity("")}
          onInvalid={e => e.target.setCustomValidity("foo")}
        />
        <button>button</button>
      </form>
    );
  }
}

SelectValid.js

import React, { Component } from "react";
import Select from "react-select";
import "react-select/dist/react-select.css";

export default class SelectValid extends Component {
  render() {
    this.required = !this.props.required
      ? false
      : this.state && this.state.value ? false : true;
    let inputProps = undefined;
    let onInputChange = undefined;
    if (this.props.required) {
      inputProps = {
        onInvalid: e => e.target.setCustomValidity(this.required ? "foo" : "")
      };
      onInputChange = value => {
        this.selectComponent.input.input.setCustomValidity(
          value
            ? ""
            : this.required
              ? "foo"
              : this.selectComponent.props.value ? "" : "foo"
        );
        return value;
      };
    }
    return (
      <Select
        onChange={value => {
          this.required = !this.props.required ? false : value ? false : true;
          let state = this && this.state ? this.state : { value: null };
          state.value = value;
          this.setState(state);
          if (this.props.onChange) {
            this.props.onChange();
          }
        }}
        value={this && this.state ? this.state.value : null}
        options={[{ label: "yes", value: 1 }, { label: "no", value: 0 }]}
        placeholder={this.props.placeholder}
        required={this.required}
        clearable
        searchable
        inputProps={inputProps}
        ref={input => (this.selectComponent = input)}
        onInputChange={onInputChange}
      />
    );
  }
}

Answer 2

Al configurar y desactivar setCustomValidity en el momento adecuado, el mensaje de validación funcionará perfectamente.

<input name="Username" required 
oninvalid="this.setCustomValidity(''Username cannot be empty.'')" 
onchange="this.setCustomValidity('''')" type="text" />

Utilicé onchange lugar de oninput que es más general y ocurre cuando el valor se modifica en cualquier condición, incluso a través de JavaScript.

Answer 3

Aquí está el código para manejar el mensaje de error personalizado en HTML5

<input type="text" id="username" required placeholder="Enter Name"
    oninvalid="this.setCustomValidity(''Enter User Name Here'')"
    oninput="this.setCustomValidity('''')"  />

Esta parte es importante porque oculta el mensaje de error cuando el usuario ingresa nuevos datos:

    oninput="this.setCustomValidity('''')"

Answer 4

Bien, oninvalid funciona bien pero muestra un error incluso si el usuario ingresó datos válidos. Así que he utilizado a continuación para abordarlo, espero que también funcione para usted,

oninvalid="this.setCustomValidity(''Your custom message.'')" onkeyup="setCustomValidity('''')"

Answer 5

Es muy sencillo controlar los mensajes personalizados con la ayuda del evento HTML5 oninvalid

Aquí está el código:

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity(''Witinnovation'')"
       onvalid="this.setCustomValidity('''')">

Esto es lo más importante:

onvalid="this.setCustomValidity('''')"

Answer 6

Es muy sencillo controlar los mensajes personalizados con la ayuda del evento no oninvalid HTML5

Aquí está el código:

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity(''User ID is a must'')">

Answer 7

Esto es muy simple para controlar el tipo de entrada HTML requerido mensaje. No necesita JS, o CSS solo usa HTML5.

Primero puedes usar este atributo "oninvalido" solo

<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity(''Hello Username cant be Blank!'')">

O se puede usar con el atributo "oninput"

<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity(''Hello Username cant be Blank!'')" oninput="setCustomValidity('''')">

Answer 8

He hecho una pequeña biblioteca para facilitar el cambio y la traducción de los mensajes de error. Incluso puede cambiar los textos por tipo de error que actualmente no está disponible usando el title en Chrome o x-moz-errormessage en Firefox. Ve a verlo en GitHub y da tu opinión.

Se usa como:

<input type="email" required data-errormessage-value-missing="Please input something">

Hay una demo disponible en jsFiddle .

Answer 9

La forma más fácil y limpia que he encontrado es usar un atributo de datos para almacenar su error personalizado. Pruebe la validez del nodo y maneje el error usando algún html personalizado.

le javascript

if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }

y algunos super HTML5

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z '']*" required>

Answer 10

Prueba este, es mejor y probado:

HTML:

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           type="email" 
           required="required" />
    <input type="submit" />
</form>

JAVASCRIPT:

function InvalidMsg(textbox) {
    if (textbox.value === '''') {
        textbox.setCustomValidity(''Required email address'');
    } else if (textbox.validity.typeMismatch){
        textbox.setCustomValidity(''please enter a valid email address'');
    } else {
       textbox.setCustomValidity('''');
    }

    return true;
}

Manifestación:

http://jsfiddle.net/patelriki13/Sqq8e/

Answer 11

Tengo una solución única de vainilla js más simple:

Para casillas de verificación:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.checked ? '''' : ''My message'');
};

Para las entradas:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.value ? '''' : ''My message'');
};

Answer 12

Utilice setCustomValidity :

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

Cambié el JavaScript de vainilla de Mootools como lo sugiere @itpastorn en los comentarios, pero debería poder calcular el equivalente de Mootools si es necesario.

Editar

He actualizado el código aquí ya que setCustomValidity funciona de manera ligeramente diferente a lo que entendí cuando contesté originalmente. Si setCustomValidity se establece en un valor distinto a la cadena vacía, el campo se considerará inválido; por lo tanto, debe borrarlo antes de probar la validez, no puede simplemente configurarlo y olvidarlo.

Edición adicional

Como se señala en el comentario de @thomasvdb a continuación, debe borrar la validez personalizada en algún evento fuera del invalid contrario, puede haber un pase adicional a través del controlador no oninvalid para borrarlo.

Answer 13

Nota: Esto ya no funciona en Chrome, no se ha probado en otros navegadores. Ver ediciones a continuación. Esta respuesta está siendo dejada aquí como referencia histórica.

Si cree que la cadena de validación realmente no debe establecerse por código, puede configurar el atributo de título del elemento de entrada para que lea "Este campo no se puede dejar en blanco". (Funciona en Chrome 10)

title="This field should not be left blank."

Ver http://jsfiddle.net/kaleb/nfgfP/8/

Y en Firefox, puedes agregar este atributo:

x-moz-errormessage="This field should not be left blank."

Editar

Esto parece haber cambiado desde que escribí originalmente esta respuesta. Ahora, agregar un título no cambia el mensaje de validez, solo agrega un apéndice al mensaje. El violín anterior sigue siendo válido.

Editar 2

Chrome ahora no hace nada con el atributo de título a partir de Chrome 51. No estoy seguro de en qué versión cambió esto.