Actualmente tengo un elemento de entrada para un número de teléfono e intento usar el atributo de patrón, pero se niega a hacerlo. dice "Validación (HTML5): ¡El patrón no es un atributo válido de entrada de elemento"! Cuando cambio el tipo a "texto", dice que el atributo de patrón solo es válido cuando el título está presente !

<input type="number" class="form-control"data-require="" id="Mobile" placeholder="Mobile No" autocomplete="off" pattern="[\+]\d{3}d{9}" required>

ACTUALIZACIÓN:

¡Agregué el atributo de título y está funcionando ahora! pero mi único problema es que cuando hago clic en enviar, envía el formulario a pesar de que el formato no coincide.

3
Yura 28 feb. 2018 a las 11:07

3 respuestas

La mejor respuesta

El <input> debe ser válido sin el atributo title (validado en https://validator.nu/):

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <input type="text" class="form-control" data-require="" id="Mobile" placeholder="Mobile No" autocomplete="off" pattern="[\+]\d{3}d{9}" required>
  </body>
</html>

Cambios adicionales:

  • Falta un espacio antes del atributo data-require.
  • El atributo pattern solo está permitido en los siguientes tipos: email, password, search, tel, text o {{X6} }.

Su expresión regular ([\+]\d{3}d{9}) tampoco es válida. Puede probar una de las siguientes reglas:

  • [\+]\d{3}\d{9}
  • [\+]\d{12}

Te faltan \ antes del segundo d para que coincidan solo con los números. El segundo patrón es una versión reducida del primer patrón.

5
Sebastian Brosch 28 feb. 2018 a las 08:29

Puede agregar un atributo no válido a la etiqueta

<input type="text" name="HasAPattern" pattern="\w{3}" title="Enter 3 characters" oninvalid="setCustomValidity('Needs to match patern')" >

El método HTMLSelectElement.setCustomValidity () establece el mensaje de validez personalizado para el elemento de selección en el mensaje especificado. Use la cadena vacía para indicar que el elemento no tiene un error de validez personalizado.

También puede usar código como event.preventDefault(); dentro de él para cancelar el envío si no es válido

-1
Rasovica 28 feb. 2018 a las 08:26

Está arreglado, acabo de agregar esto en mi javascript.

/[+font>\d{3}d{9}/.test(PhoneNo)

0
Yura 28 feb. 2018 a las 08:32