entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

requerir que el campo de un formulario sea igual a otro usando HTML5 ?

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?.

0voto

Dr oscar comentado

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

3 Respuestas

1voto

white Puntos75880

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

0voto

Dr oscar comentado

El asunto es que hago uso en un archivo .js donde verifico al presionar mi button submit.

 $('#form-clave').validate(); //uso la propiedad del escript validate de jquery
            //al presionar el boton
            $('#aceptar').on('click',function(e){
               e.preventDefault();

                var clave1=$('#clave1').val();
                var clave2=$('#clave2').val();
                var clave3=$('#clave3').val();
                //verificar que el campo clave2 sea igual al campo clave3
                clave2.onchange = clave3.onkeyup = passwordMatch;

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

                if( $('#form-clave').valid()==true){

                     $.ajax({
                          type:"post",
                          url:"logica/forClave.php",
                          data:('clave1='+clave1+'&clave2='+clave2),
                          beforeSend: function(){
                           $('#load').show();
                          },
                          success: function(valor){
                           $('#load').hide();
                            ----- y etc --------

Mi formulario se llama form-clave
Pero ahora se envia el formulario y no verifica que sean iguales antes.

0voto

white comentado

Estas usando una librería? yo te di una solución para html5. ya que usas jquery y una librería, entonces..

suponiendo que tienes la librería jquery-validation debes establecer las reglas previamente:

$('#form-clave').validate({
    rules: {
        clave2: 'required',
        clave3: {
            equalTo: '#clave2'
        }
    }
});

$('#aceptar').on('click',function(e) {

    // ...

});

0voto

Dr oscar comentado

Bueno, pero antes estaba usando el validation y lo quité porque el formato de la respuesta me parecía muy plano, y nose como cambiarle el diseño. Luego utilicé los atributos html5 pero no tenia un atributo para comparar los valores y dar un mensaje.

En sí ése es mi dilema, quiero dar una respuesta y que sea vistosa ó minimo cambiarle el color de la letra del mensaje, nose.

0voto

white comentado

me funciona perfectamente a mí con tú código, reviza este ejemplo: http://jsfiddle.net/kspr/16p164ov/

intenta depurar el código colocando esto:

console.log($('#form-clave').valid(), clave1, clave2)

antes de la linea:

if( $('#form-clave').valid()==true) {

y reviza que te imprime en consola.

0voto

Dr oscar comentado

Entonces como puedo modificar el diseño de la respuesta? cambiarle por lo menos el color de respuesta, y si se puede colocar como etiqueta mejor...

0voto

white comentado

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/

0voto

Dr oscar comentado

Vale, vi el ejemplo y en él modifican elementos de un .css pero no especifican cual, existe uno en especifico ó en cualquiera ?
Es que lo pegué en uno que estaba utilizando (obviamente hago referencia a él) pero solo vi un cambio en el tipo de letra.

1voto

white comentado

El plugin jquery-validation crea un elemento <label> con clase .error despues de el campo <input>

es decir que si tenemos esto:

<input type="text" name="user" required>

al validar tendrás esto:

<input type="text" name="user" id="user" required>
<label class="error" id="user-error">this field is required</label>

lo que hago en esta linea:

errorElement: 'div',

es cambiar ese <label> por un <div>

<input type="text" name="user" id="user" required>
<div class="error" id="user-error">this field is required</div>

en esta parte:

errorPlacement: function(error, input) {
    $(error).css({
        'left': input.outerWidth(true) + 20,
        'top': 0
    });

    input.parent().append(error);
}

lo que hago es agregar al padre del campo <input> ( osea al elemento <div class="form-group"> ) el elemento del error ( osea <div class="error" id="user-error">...</div> )

cada elemento div.error tiene su estilo css como puedes ver en el ejemplo, quieres ver como funciona en el dom? reviza tu consola con firebug o la consola nativa de tu navegador y reviza el documento html.

espero haber sido lo mas claro posible.

saludos!

0voto

Dr oscar comentado

El problema es que yo también usaba form-group y apliqué todo eso en el .js además coloqué todo tu diseño del form-group en mi .css, y aún asi no me aparecen las etiquetas rojas tal como las tuyas.

enter image description here

 $('#form-clave').validate({
                rules: 
                { 
                 clave1:{required:true}, 
                 clave2:{required:true,minlength:6,maxlength:20},     
                 clave3:{required:true, equalTo: '#clave2'}                  
                },
                messages:
                {
                  clave1:{required:"Complete este campo"},
                  clave2:{required:"Complete este campo", minlength:"La contraseña de llevar minimo 6 caracteres",maxlength:"La contraseña no debe superar 20 caracteres"},
                  clave3:{required:"Complete este campo", equalTo:"Debe coincidir con la nueva contraseña"}
                },
                errorElement: 'div',
                errorPlacement: function(error, input) {
                    $(error).css({
                        'left': input.outerWidth(true) + 20,
                        'top': 0
                    });

                    input.parent().append(error);
                }
            })

            $('#aceptar').on('click',function(e){
               e.preventDefault();

                var clave1=$('#clave1').val();
                var clave2=$('#clave2').val();
  ---------------etc

ó nose si quizás sea por como defino mis campos input:

 <div  class="form-group password clearfix">
   <div class="col-lg-10">
      Nueva contraseña :
    <input type="password" id="clave2" class="form-control" name="clave2"  required>
   </div>
</div>

 <div  class="form-group password clearfix">
   <div class="col-lg-10">
     Repita la nueva contraseña :
    <input type="password" id="clave3" class="form-control" name="clave3" required>
   </div>
 </div> 

0voto

GusGarsaky Puntos5480
  • 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="^([[email protected]*#]{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
    }
}

0voto

Dr oscar comentado

Gracias por tu respuesta Gus, pero lo que me interesa es que se envie el mensaje de error en el campo 3(newpasswordconfirm) del formulario cuando no sea asi, a modo de como se muestra cuando se utiliza el required en la etiqueta input.

1voto

Dr oscar Puntos3250

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 :) .

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta