Se requiere un formulario HTML5. ¿Establecer mensaje de validación personalizado?

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 enter 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"?

EDITAR: 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 las pruebas. Por favor haz lo mismo

Uso 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("");
        };
    }
})

Me cambié a JavaScript básico de Mootools según lo sugerido por @itpastorn en los comentarios, pero usted debería ser capaz de trabajar en los Mootools equivalente si es necesario.

Editar

He actualizado el código aquí, ya que setCustomValidityfunciona de manera ligeramente diferente a lo que entendí cuando originalmente respondí. Si setCustomValidityse establece en otra cosa que no sea la cadena vacía, hará que el campo se considere no válido; por lo tanto, debe borrarlo antes de probar la validez, no puede simplemente configurarlo y olvidarlo.

Editar más

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

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('')"

Es muy simple controlar mensajes personalizados con la ayuda del HTML5eventooninvalid

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('')"

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

Si considera 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 puede dejarse en blanco". (Funciona en Chrome 10)

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

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

Y en Firefox, puede agregar este atributo:

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

Editar

Esto parece haber cambiado desde que originalmente escribí esta respuesta. Ahora agregar un título no cambia el mensaje de validez, solo agrega un anexo al mensaje. El violín de arriba todavía se aplica.

Editar 2

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

Es muy sencillo controlar mensajes personalizados con la ayuda del HTML5 oninvalidevento.

Aquí está el código:

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

Al configurar y desarmar setCustomValidityen el momento adecuado, el mensaje de validación funcionará sin problemas.

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

Usé en onchangelugar de lo oninputque es más general y ocurre cuando el valor se cambia en cualquier condición, incluso a través de JavaScript.

He creado 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 titleen Chrome o x-moz-errormessageFirefox. 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 demostración disponible en jsFiddle .

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/

La forma más fácil y limpia que he encontrado es utilizar un atributo de datos para almacenar su error personalizado. Pruebe la validez del nodo y maneje el error utilizando algunos html personalizados.

le javascript

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

y algunos súper HTML5

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

La solución para evitar mensajes de error de Google Chrome al ingresar cada símbolo:

<p>Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.</p>
<form method="post" action="#">
  <label for="text_number_1">Here you will see browser's error validation message on input:</label><br>
  <input id="test_number_1" type="number" min="0" required="true"
         oninput="this.setCustomValidity('')"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

<form method="post" action="#">
  <p></p>
  <label for="text_number_1">Here you will see no error messages on input:</label><br>
  <input id="test_number_2" type="number" min="0" required="true"
         oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid && e.setCustomValidity(' ')})(this)"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

Tengo una solución más simple de vanilla js:

Para casillas de verificación:

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

Para entradas:

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

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

He planteado un problema aquí , si ayuda algo. Aquí hay un CodeSandbox con un ejemplo de trabajo, y el código más importante allí 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}
      />
    );
  }
}

De acuerdo, 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 ti,

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

Se puede manejar fácilmente simplemente poniendo 'título' con el campo:

<input type="text" id="username" required title="This field can not be empty"  />