Question

Hola y saludos lector.

Estoy creando un formulario de cambio de contraseña en mi pagina, y solicito 3 campos:

1. contraseña original.
2. Nueva contraseña.
3. Verificar contraseña.

Ahora dentro de mi <form> quiero requerir que estos campos sean obligatorios, que el segundo campo tenga minimo 6 carácteres,
y que el ultimo campo sea igual al segundo campo antes de enviar los datos por ajax a un .php donde valido la primera contraseña y etc.
El punto es que necesito un atributo html5 nativo que me requiera que el campo 2 sea igual al campo 3. Por ejemplo a los anteriores:

  Nueva contraseña :
 <input type="password" id="clave2" class="form-control" name="clave2" required pattern=".{6,}" oninvalid="setCustomValidity('Campo obligatorio, debe contener minimo 6 caracteres')">

  Repita la nueva contraseña :
  <input type="password" id="clave3" class="form-control" name="clave3" required 
  oninvalid="setCustomValidity('Campo obligatorio, debe coincidir con la nueva contraseña')">

He probado con atributo equalTo="#clave2" .....pero no me funciona. Cual podria utilizar?.

Comments

Cuando me refiero a atributos, hablo de tales como : required,pattern,oninvalid
las cuales van dentro de mis etiquetas <input>

Answer 1

Hola @Dr+oscar con un poco de ayuda de la api de html5 y javascript, podrías lograr lo que deseas, intenta usar elemento.setCustomValidity() para una validación personalizada.

<form method="POST" id="form">
    <input type="text" name="password" id="password" required>
    <input type="text" name="password" id="password2" required>
    <input type="submit">
</form>

var password, password2;

password = document.getElementById('password');
password2 = document.getElementById('password2');

password.onchange = password2.onkeyup = passwordMatch;

function passwordMatch() {
    if(password.value !== password2.value)
        password2.setCustomValidity('Las contraseñas no coinciden.');
    else
        password2.setCustomValidity('');
}

Answer 2

• Requerir que los campos sean obligatios

<form method="POST" id="passwordForm">
    <inuput type="text" name="oldPassword" id="opassword">
    <input type="password" name="newPassword" id="newPassword" required>
    <input type="password" name="newPasswordConfirm" id="newPasswordConfirm" required>
    <input type="submit" value="Cambiar contraseña">
</form>

• Quiero que el segundo campo tenga mínimo 6 carácteres

Esto lo hacemos con expresiones regulares, mediante el atributo pattern de HTML5:

<input type="password" name="newPassword" id="password" required pattern="^([a-zA-Z0-9@*#]{6,15})$">

En éste caso, el password constará de caracteres alfanuméricos, mínimo 6 y máximo 15.

• Quiero comprobar que sean iguales antes de enviarlas

$('#passwordForm').on('submit', function(e) {
    e.preventDefault(); // previene el submit

    var newPassword = $('#newPassword').val();
    var newPasswordConfirm = $('#newPasswordConfirm').val();

    if(newPassword !== newPasswordConfirm) {
        // mostrar mensaje de error
    } else {
        $(this).submit(); // envía los datos
    }
}

Answer 3

Bueno al final la respuesta a ésta pregunta fué la siguiente:

"tienes las opciones errorElement y errorPlacement de la libreria jquery-validation:

errorElement: el nombre de la etiqueta para el error
errorPlacement: una funcion que se encarga de agregar el elemento con el error, tiene 2 argumentos en el callback errorElement e input.

aca un ejemplo usando estas opciones:

http://jsfiddle.net/kspr/habark4j/ "

En mi caso el diseño de las etiquetas color rojo no aparecian porque en mi formulario no habia espacio suficiente para mostrarse porque las etiquetas <div> estaban encerradas:

<div class="col-md-10">
      Contraseña actual :
    <input type="password" id="clave1" class="form-control" name="clave1" required>
 </div>

Asi que preferí dejar el diseño de lado y en el .css sólo modificar el atributo color de la clase error:

.error{
  color:red;
}

Agradecimientos y crédito para el usuario : white
Gracias :) .