No puedo entender cómo hacer que una variable sea igual a una cierta longitud de caracteres. Como estoy tratando de crear validación de formularios a través de Javascript. Sin embargo, no parece estar funcionando. La sección que no parece estar validando es la última declaración ifif donde estoy comparando la longitud de una tarjeta maestra, visa y tarjeta americana, sin embargo, 'me está permitiendo ingresar cualquier cantidad de caracteres.

He intentado cambiar los símbolos que se utilizan, sin embargo, ¡siento que == es lo correcto!

function orderValidate() { //need to work on this
    //validate contact number to only be numbers\
    var american = document.getElementById("americanInput").value;
    var master = document.getElementById("masterInput").value;
    var visa = document.getElementById("visaInput").value;
    var email = document.getElementById("email");
    var errMsg = document.getElementById("errMsg");
    var numberRegex = /^\d{10}$/;
    var emailRegex = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    var contactNumber = document.getElementById("number").value;
    if (contactNumber.length < 8 || (!contactNumber.match(numberRegex))) {
        errMsg.innerHTML = "Please enter a valid phone number";
        return false;
    } else if (email.length < 7 || !email.match(emailRegex)) {
        errMsg.innerHTML = "Please enter a valid email";
        return false;
    } else if (master.length !== 16|| visa.length !== 16 || american.length 
    !== 15){
        errMsg.innerHTML = "Please check your card details again";
        return false;
    }

    }
        <div class="wrapper">
        <input type="text" name="card" id="visaInput">
        <input type="text" name="card" id="masterInput">
        <input type="text" name="card" id="americanInput">
        </div>

function showAmerican() {
    document.getElementById("americanInput").style.display = 'block';
    document.getElementById("masterInput").style.display = 'none';
    document.getElementById("visaInput").style.display = 'none';
}

function showVisa() {
    document.getElementById("visaInput").style.display = 'block';
    document.getElementById("americanInput").style.display = 'none';
    document.getElementById("masterInput").style.display = 'none';
}

function showMastercard() {
    document.getElementById("masterInput").style.display = 'block';
    document.getElementById("americanInput").style.display = 'none';
    document.getElementById("visaInput").style.display = 'none';
}
    master.onclick = showMastercard;
    american.onclick = showAmerican;
    repeat.onclick = repeatAddress;

El formulario en lugar de validar solo lo envía una vez que llega a esta etapa ...

1
PandaPlaysAll 6 oct. 2019 a las 07:54

3 respuestas

La mejor respuesta

El problema es que está verificando la longitud de todas las tarjetas disponibles, incluso cuando no se ingresan. Solo debe verificar la longitud de la tarjeta ingresada.

if (master.length !== 16|| visa.length !== 16 || american.length !== 15) {}

La condición anterior sería verdadera todo el tiempo. Esto se debe a que cuando se envía el formulario, solo se ingresa una tarjeta y los campos del formulario de otras tarjetas estarán vacíos. Entonces su longitud sería 0 y no sería igual a 15 o 16, lo que hace que esta condición sea verdadera todo el tiempo.

if (master.length > 0 && master.length !== 16 || 
  visa.length > 0 && visa.length !== 16 ||
  american.length > 0 && american.length !== 15) {}

Cambiar la condición como se muestra arriba verificará si se ingresa un campo de tarjeta y solo entonces evaluaría si coincide con la longitud requerida.

0
Nikhil 6 oct. 2019 a las 05:31

document.getElementById("americanInput").value es una cadena. Tratar

  • parseInt(document.getElementById("americanInput").value) o
  • +document.getElementById("americanInput").value que convierte el operando en un número
0
theincrediblethor 6 oct. 2019 a las 05:08

Además, en lugar de crear una función separada para todos, puede crear una función, por ejemplo, showCard y pasar parámetros como AMEX, VISA, Master Example

showCard(cardName) {
//functionBody
}

Y luego llama a la función

showCard('American');
showCard('Visa');

Esto optimizará su código :) Saludos

0
tbaveja 6 oct. 2019 a las 05:11