1

estoy haciendo un formulario en html (y poquito de php) en el cual la mayoría de los input son required excepto 2 que en realidad uno de los dos debe ser requerido para completar el formulario pero si o si 1 de los 2. Quiero hacer un if en js o Jquery que diga que si uno de esos input está vacio, el otro debe ser requerido o si ambos estan vacios que sean requeridos. (en JS estaba probando solamente si el if funcionaba asi pero nunca me funciono)

> Siempre me muestra como que falta el expte, obviamente mi intencion es que se transforme en requerido uno de los dos o ambos pero no que aparezca un alert

function required2() {
       
        if (cuij == ' ' && expte ==' ') {
            alert('Se requieren ambos');
        } else if (expte == ' '){
            alert('Se requiere el CUIJ');
        }
        else {
            alert('Se requiere el EXPTE');
        }
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel='stylesheet' type='text/css' href='styles/style.css'>
    <title>Document</title>
</head>
<body>
    <div>
        <form action="#" method="post" id='form'>
            <fieldset

> aca arranca el formulario en el cual expte y cuij son los dos de los que 1 debe ser requerido para terminar el formulario

                <legend align='center'>AFILIADO:</legend>
                <label for='n° profesional'>N° del Profesional:</label>
                <input type='number'><br>  
                <label for='apellido'>Apellido:</label>
                <input type='text'> 
            </fieldset> <br>

            <fieldset>
                <legend align='center'>N° DE ORDEN:</legend>
                <br>
            </fieldset> <br>

            <fieldset>
                <legend align='center'>N° AFILIADO:</legend>
                <label for='dni'>DNI: </label>
                <input type='number'> <br>
                <label for='apellido'>APELLIDO:</label>
                <input type='text'>
            </fieldset> <br>

            <fieldset>
                <label for='N° del Profesional' >Fecha de regulacion:</label>
                <input type='date' value='<?php echo date("Y-m-d");?>' min='1947-01-01' max='<?php echo date("Y-m-d");?>' required> <br>
                <label for='caratula' id='caratula'>Caratula: </label>
                <input type='text' required> <br>
                <label for='honorario regulado'>Honorario regulado:</label>
                <input type='number' required>
                <label for='jus' class='label2'>JUS</label>
                <input type='number' required> <br>
                <label for='observacion'>Observacion:</label>
                <input type='text'>
                <label for='cuij' id='cuij' class='label2'>CUIJ</label>
                <input type='text'><br>
                <label for='nro. de auto' class='expte'>Nro. de auto:</label>
                <input type='number' required>
                <label for='expediente' id='expte' class='expte label2'>Expediente:</label>
                <input type='text'>
                <label for='año expediente' class='expte label2'>Año expediente:</label>
                <input type='date' value='<?php echo date("Y-m-d");?>' min='1948-01-01' max='<?php echo date("Y-m-d");?>' required><br>
                <label for='circuscripcion' required>Circunscripcion:</label>
                <input type='number' required>
                <label for='tribunal'class='label2'>Tribunal</label>
                <input type='number' required><br>
                <label for='cam/juz'>Camara/Juzgado</label>
                <input type='number' required><br>
                <label for='nomin/sala'>Nominacion/Sala</label>
                <input type='number' required><br>
                <label for='libro'>Libro</label>
                <input type='number' required>
                <label for='folio' class='label2'>Folio (Hoja)</label>
                <input type='number' required><br>
                <label for='grupo'>Grupo</label>
                <input type='number' required>
            </fieldset><br>
                <input type='submit' onclick='required2()' id='enviar'>
                <input type='reset' id='reset'> <br><br>
        </form>
    </div>
    <script src='js/form.js'></script>
    </body>
</html>

1
  • Las comillas no deberían tener un espacio en blanco entre ellas, pues con eso un input vacío no encajaría en la condición
    – BetaM
    el 7 sep. 2019 a las 20:29

1 respuesta 1

0

Entendiendo tu pregunta hice un codigo en JQuery que valida los dos campos opcionales y hace la siguiente evaluacion:

1) Si ambos campos estan vacio no procesa el formulario e indica cual esta vacio 2) Si uno de los campos esta vacio solamente avisa cual es el campo vacio y procesa el formulario.

Ahora bien:

Debes colocar un atributo name a los campos que vas a validar opcionalmente para poder buscarlos, (no se que metodo de serializacion estas usando pero a mi punto de vista le falta los atributos names.

Explicacion del codigo:

1) Se le colocaron atributos names para localizar los inputs a evaluar:

<label for='cuij' id='cuij' class='label2'>CUIJ</label>
<input type='text'name="cuij"><br>

Y esta linea:

<label for='expediente' id='expte' class='expte label2'>Expediente:</label>
<input type='text' name="expte">

2) Carga del JQuery

<script src='js/form.js'></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" 
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
 crossorigin="anonymous"></script>

3) Lectura de la cantidad de datos en cada campo

var  cuij = $("input[name='cuij']").val();
var expte = $("input[name='expte']").val();

4) Remover la asignacion por Jquery de campos requeridos para cuij y expte

// borrar campo requerido
$("input[name='cuij']").removeAttr("required");
$("input[name='expte']").removeAttr("required");

5) Condicion si cuij y expte tiene valor entonces solo avisa EN cuij

 // cuij requeridos
  if (cuij.length==0 && expte.length > 0) {    
                    alert('Campo [cuij] es requerido');
  }; 

6) Condicion si expte esta vacio y cuij tiene valor solo avisa EN expte

// expte requeridos
if(cuij.length>0 && expte.length==0) {
                alert('Campo [expte] es requerido');
}; 

7) Condicion si ambos estan vacios agrega que ambos campos son requeridos y avisa

// cuij y expte requeridos
if (cuij.length==0 &&  expte.length==0) {
                   $("input[name='cuij']").attr("required", "required");
                   $("input[name='expte']").attr("required", "required");
                   alert('Campo [cuij] y [expte] es requerido');
};

Adjunto el codigo con los cambios hechos:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel='stylesheet' type='text/css' href='styles/style.css'>
    <title>Document</title>
</head>
<body>
    <div>
        <form action="salida.php" method="post" id='form'>
            <fieldset> aca arranca el formulario en el cual expte y cuij son los dos de los que 1 debe ser requerido para terminar el formulario

                <legend align='center'>AFILIADO:</legend>
                <label for='n° profesional'>N° del Profesional:</label>
                <input type='number'><br>  
                <label for='apellido'>Apellido:</label>
                <input type='text'> 
            </fieldset> <br>

            <fieldset>
                <legend align='center'>N° DE ORDEN:</legend>
                <br>
            </fieldset> <br>

            <fieldset>
                <legend align='center'>N° AFILIADO:</legend>
                <label for='dni'>DNI: </label>
                <input type='number'> <br>
                <label for='apellido'>APELLIDO:</label>
                <input type='text'>
            </fieldset> <br>

            <fieldset>

                <label for='N° del Profesional' >Fecha de regulacion:</label>
                <input type='date' value='<?php echo date("Y-m-d");?>' min='1947-01-01' max='<?php echo date("Y-m-d");?>' required> <br>
                <label for='caratula' id='caratula'>Caratula: </label>
                <input type='text' required> <br>
                <label for='honorario regulado'>Honorario regulado:</label>
                <input type='number' required>
                <label for='jus' class='label2'>JUS</label>
                <input type='number' required> <br>
                <label for='observacion'>Observacion:</label>
                <input type='text'>

                    <label for='cuij' id='cuij' class='label2'>CUIJ</label>
                    <input type='text'name="cuij"><br>

                <label for='nro. de auto' class='expte'>Nro. de auto:</label>
                <input type='number' required>

                    <label for='expediente' id='expte' class='expte label2'>Expediente:</label>
                    <input type='text' name="expte">

                <label for='año expediente' class='expte label2'>Año expediente:</label>
                <input type='date' value='<?php echo date("Y-m-d");?>' min='1948-01-01' max='<?php echo date("Y-m-d");?>' required><br>
                <label for='circuscripcion' required>Circunscripcion:</label>
                <input type='number' required>
                <label for='tribunal'class='label2'>Tribunal</label>
                <input type='number' required><br>
                <label for='cam/juz'>Camara/Juzgado</label>
                <input type='number' required><br>
                <label for='nomin/sala'>Nominacion/Sala</label>
                <input type='number' required><br>
                <label for='libro'>Libro</label>
                <input type='number' required>
                <label for='folio' class='label2'>Folio (Hoja)</label>
                <input type='number' required><br>
                <label for='grupo'>Grupo</label>
                <input type='number' required>
            </fieldset><br>

                <input type='submit' id='enviar'>
                <input type='reset' id='reset'> <br><br>
        </form>
    </div>
    <script src='js/form.js'></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" 
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
     crossorigin="anonymous"></script>

     <script>
      $(document).ready(function() {
        // validar campos opcionales
        $('#enviar').click(function(e){
            var  cuij = $("input[name='cuij']").val();
            var expte = $("input[name='expte']").val();
            // borrar campo requerido
            $("input[name='cuij']").removeAttr("required");
            $("input[name='expte']").removeAttr("required");
            // cuij requeridos
            if (cuij.length==0 && expte.length > 0) {    
                    alert('Campo [cuij] es requerido');
            }; 
            // expte requeridos
            if(cuij.length>0 && expte.length==0) {
                   alert('Campo [expte] es requerido');
            }; 
            // cuij y expte requeridos
            if (cuij.length==0 &&  expte.length==0) {
                   $("input[name='cuij']").attr("required", "required");
                   $("input[name='expte']").attr("required", "required");
                   alert('Campo [cuij] y [expte] es requerido');
            };
        });

      });
     </script>
    </body>
</html>

Espero que pueda ser de ayuda...

1
  • Muchas gracias, fue de gran ayuda. pude simplificar un poco mas el codigo poniendo directamente que ambos por defectos sean required y creando un if preguntando que si uno era > 0 y el otro == 0, al == se le saque el attr required y funciono! pero sin tu código no lo pudiera haber hecho, muchas gracias! el 8 sep. 2019 a las 21:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.