HTML5: Testes do atributo pattern (input)

<form name="cadastro1">
   CPF:
   <input type="text" name="cpf"
      pattern="\d{3}\.\d{3}\.\d{3}-\d{2}">
   <input type="submit">
</form>

Sem atributo title

Ao digitar um CPF inválido como "abc", o input deve ficar com fundo e letra vermelhos. Ao tentar enviar o CPF inválido:

• O formulário não deve ser enviado.
• Deve aparecer uma mensagem de erro padrão, perto do input.

<form name="cadastro2">
   CPF:
   <input type="text" name="cpf"
      pattern="\d{3}\.\d{3}\.\d{3}-\d{2}"
      title="Digite o CPF no formato nnn.nnn.nnn-nn">
   <input type="submit">
</form>

Com atributo title

Ao digitar um CPF inválido como "abc", o input deve ficar com fundo e letra vermelhos. Ao tentar enviar o CPF inválido:

• O formulário não deve ser enviado.
• Deve aparecer uma mensagem de erro padrão, perto do input.
• Na mensagem de erro também deve aparecer o conteúdo de title.

<form name="cadastro3" onsubmit="return valida()">
   CPF:
   <input type="text" name="cpf"
      pattern="\d{3}\.\d{3}\.\d{3}-\d{2}"
      title="Digite o CPF no formato nnn.nnn.nnn-nn">
   <input type="submit">
</form>

<script>
   function valida() {
      if (document.cadastro3.cpf.validity.patternMismatch) {
         alert("O CPF está incorreto");
      } else {
         alert("O CPF está correto");
      }
      return false;
   }
</script>

JavaScript: validity.patternMismatch

Ao digitar um CPF inválido como "abc", o input deve ficar com fundo e letra vermelhos. Ao tentar enviar o CPF inválido, há dois comportamentos, não sei qual é o correto:

Chrome, Firefox:

• O formulário não deve ser enviado.
• Deve aparecer uma mensagem de erro padrão, perto do input.
• Na mensagem de erro também deve aparecer o conteúdo de title.
• A função valida() não é chamada.

Safari, Opera:

• O formulário não deve ser enviado.
• Vai aparecer um alerta com a mensagem "O CPF está incorreto"

<form name="cadastro4">
   CPF:
   <input type="text" name="cpf"
      pattern="\d{3}\.\d{3}\.\d{3}-\d{2}"
      title="Digite o CPF no formato nnn.nnn.nnn-nn"
      oninvalid="return cpf_incorreto(this);">
   <input type="submit">
</form>

<script>
   function cpf_incorreto(el) {
      alert("O valor " + el.value + " não é um CPF");
      return false;
   }
</script>

JavaScript: Evento onvalid

Ao digitar um CPF inválido como "abc", o input deve ficar com fundo e letra vermelhos. Ao tentar enviar o CPF inválido:

• O formulário não deve ser enviado.
• Deve aparecer um alerta com a mensangem: "O valor abc não é um CPF".