Problem regular expressions JS

Navigation
0
<input class="form-control" type="text" name="titulo" id="titulo" />
        <div id="tituloPost"></div>
<textarea class="form-control" name="contenido" id="contenido" rows="4" cols="50" placeholder="Escribe tu mensaje aquí" ></textarea>
        <div id="mensaje"></div>

And the button 

<button type="submit" class="btn btn-info" value="Validar campos" onclick="return validarCampos()" style="margin-bottom: 5px;">Publicar nuevo tema</button>

I have this function that checks two input 

function validarCampos(){
    var valido = true;
    var titulo = document.getElementById("titulo").value;
    var testTitulo = /^[\W\s\w]{1,100}$/i;

    var mensaje = document.getElementById("contenido").value;
    var testMensaje = /^[\W\s\w]{1,2000}$/i;

    if (testTitulo.test(titulo)) {
      valido = true;    
    } else{
      valido = false;
      document.getElementById("tituloPost").innerHTML = "Este campo no debe de estar vacío ni superar los 100 caracteres";

    }

     if (testMensaje.test(mensaje)) {
       valido = true;
    } else {
      valido = false;
      document.getElementById("mensaje").innerHTML = "Este campo no debe de estar vacío ni superar los 2000 caracteres";
    }

    return valido;
  }

The problem is that when one of the two fields is filled and the other empty it sends me the information and it should not be like that.

    
asked by Stewie 16.12.2018 в 22:34
source

2 answers

0

The problem you have is in the function, do not really check the regular expression if it's ok, but so you ask the error this time look:

At 2 different times, questions about the fields, which at each statement if modifies the value of 'valid'. And what must be happening is that maybe, your first field is empty, but the second is complete, so in your second if a valid you give 'true' and this is what you are doing wrong in your function. A solution can be this: 

        function validarCampos(){
        var titulo = document.getElementById("titulo").value;
        var testTitulo = /^[\W\s\w]{1,100}$/i;

        var mensaje = document.getElementById("contenido").value;
        var testMensaje = /^[\W\s\w]{1,2000}$/i;

        if (!testTitulo.test(titulo)) {
          document.getElementById("tituloPost").innerHTML = "Este campo no debe de estar vacío ni superar los 100 caracteres";
    return false;

        }

         if (!testMensaje.test(mensaje)) {
          document.getElementById("mensaje").innerHTML = "Este campo no debe de estar vacío ni superar los 2000 caracteres";
    return false;
        }
    document.getElementById("tituloPost").innerHTML ="";
document.getElementById("mensaje").innerHTML ="";
        return true;
      }

In any case, verify that it is correct and can surely be improved.

    
answered by 16.12.2018 / 22:41
source
0

The same thing happened to me recently, the best thing is that you do several functions, I'm going to leave you a code of mine, which controls a form. 

 function iniciar() {
    document.getElementById("enviar").addEventListener('click', validar, false);
}

function validarNumSocio() {
    var numeroSocio = document.getElementById("numeroSocio");
    if /**/ (numeroSocio.value == "") {
        numeroSocio.className = "erroneo";
        numeroSocio.focus();
        alert("El numero no puede estar vacio");
        return false;
    } else if (numeroSocio.value > 999 || numeroSocio.value <= 99) {
        numeroSocio.className = "erroneo";
        numeroSocio.focus();
        alert("El numero debe estar entre 99 y 999");
        return false;
    } else if (isNaN(numeroSocio.value)) {
        numeroSocio.className = "erroneo";
        numeroSocio.focus();
        alert("Debe de ser un numero");
        return false
    } else {
        numeroSocio.className = "";
        return true;
    }
}

function validarDni() {
    var dni = document.getElementById("dni");
    if (dni.value.length == 0) {
        dni.className = "erroneo";
        dni.focus();
        alert("El dni no puede estar vacio");
        return false;
    } else if (dni.value.length != 9) {
        dni.className = "erroneo";
        alert("El dni tiene que tener 9 cifras");
        dni.focus();
        return false;
    } else {
        dni.className = "";
        return true;
    }
}

It's an example, now put all the functions you want. And finally, this function, which is the one that proves that they are all true. 

function validar(e) {
    if (validarNumSocio() && validarDni() && validarFecha() && validarNombre() && validarprimerApellido() && validarsegundoApellido() && validarLocalidad()) {
        crearUsu();
        return true;
    } else {
        e.preventDefault();
        return false;
    }
}

This example, is stopping at each function to say that this field is wrong, I hope I have helped you. Greetings.

    
answered by 16.12.2018 в 22:45
Error with move_uploaded_file in xampp I need to write a user props in the template