Home / Questions / 306575
Accepted
ASASCED
Asked: 2020-11-07 19:49:12 +0800 CST 2020-11-07 19:49:12 +0800 CST

Problems with JQuery and validation

  • 772

When I want to validate a form where I want a registration to start with a 1, nothing is executed for me, I attach the code.

JQUERY

function verificarMatricula () {
  var matricula = $('#matricula').val()

  if (matricula.length > 0) {
    if (matricula[0] != 1) {
      $('#mat').html('La matricula debe de iniciar con 1')
    } else {
      $('#mat').html('')
    }
  }
}

$(document).ready(function () {
  $('#matricula').keyup(verificarMatricula)
})

HTML

    <form action="datosre.php" method="POST" onsubmit="return validar2();" name="formulario">
        <div class="grid">
            <h1>Registro</h1>
            <input id="_name" name="name" type="text" placeholder="Ingresa tu nombre"
                onkeyup="this.value=this.value.toUpperCase()">
            <input id="_Apaterno" name="Apaterno" type="text" placeholder="Ingresa tu apellido Paterno"
                onkeyup="this.value=this.value.toUpperCase()">
            <input id="_Amaterno" name="Amaterno" type="text" placeholder="Ingresa tu apellido Materno"
                onkeyup="this.value=this.value.toUpperCase()">
            <input id="matricula _email" autocomplete="off" name="email" type="text" value="" minlength="11"
                maxlength="11" placeholder="Ingresa tu matricula">
            <div id="mat" class="validacion"></div>
            <input id="_password2" name="_password2" type="password" placeholder="Ingresa tu contraseña">
            <input id="_verpass" name="_verpass" type="password" placeholder="Verifica tu contraseña">
            <div id="comprobar" class="contra validacion"></div>

            <button> Enviar </button>
            <a href="index.php">Iniciar sesion</a>
        </div>
    </form>
jquery

2 Answers

  1. Best Answer

    The problem is mainly due to the id that you define in the input to validate, you have id="matricula _email":

      <input id="matricula _email" autocomplete="off" name="email" type="text" value="" minlength="11"
                maxlength="11" placeholder="Ingresa tu matricula">

    should be id="matricula" :

        <input id="matricula" autocomplete="off" name="matricula" type="text" value="" minlength="11" maxlength="11" placeholder="Ingresa tu matricula">

    Make the change and the function call will verificarMatricula() succeed. Check out your example:

    function verificarMatricula() {

  var matricula = $('#matricula').val()

  if (matricula.length > 0) {
    if (matricula[0] != 1) {
      $('#mat').html('La matricula debe de iniciar con 1')
    } else {
      $('#mat').html('')
    }
  }
}

$(document).ready(function () {
  $('#matricula').keyup(verificarMatricula)
})	 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="datosre.php" method="POST" onsubmit="return validar2();" name="formulario">
        <div class="grid">
            <h1>Registro</h1>
            <input id="_name" name="name" type="text" placeholder="Ingresa tu nombre"
                onkeyup="this.value=this.value.toUpperCase()">
            <input id="_Apaterno" name="Apaterno" type="text" placeholder="Ingresa tu apellido Paterno"
                onkeyup="this.value=this.value.toUpperCase()">
            <input id="_Amaterno" name="Amaterno" type="text" placeholder="Ingresa tu apellido Materno"
                onkeyup="this.value=this.value.toUpperCase()">
            <input id="matricula" autocomplete="off" name="matricula" type="text" value="" minlength="11" maxlength="11" placeholder="Ingresa tu matricula">	
            <div id="mat" class="validacion"></div>
            <input id="_password2" name="_password2" type="password" placeholder="Ingresa tu contraseña">
            <input id="_verpass" name="_verpass" type="password" placeholder="Verifica tu contraseña">
            <div id="comprobar" class="contra validacion"></div>

            <button> Enviar </button>
            <a href="index.php">Iniciar sesion</a>
        </div>
    </form>

    enter image description here

    • 1

  2. Allow me to modify the code for slightly clearer functions, the condition is that if the registration is empty or does not start with 1, it shows the message.

    function verificarMatricula () {
  var matricula = $(this).val();
  var message = '';
  //Se realiza la comparación con una cadena vacía
  if (matricula === '' || !matricula.startsWith('1')) {
    message = 'La matricula debe iniciar con 1';
  }

  $('#mat').html(message);
}

$(() => {
  $('#matricula').on('keyup', verificarMatricula);
})
    • 0