J'ai créé une validation JavaScript pour un formulaire, mais j'ai rencontré des difficultés. Il y a actuellement deux parties à parties (pour le moment) pour JavaSCript à vérifier (email et sms). Le script exécute uniquement les e-mails et ne vérifie pas du tout les SMS, alors qu'il devrait vérifier les deux ensemble. Si les deux sont corrects, retournez true. Des idées?

function validateForm() {
    var emailBoxChecked = document.getElementById("checkemail").checked
    var emailBoxChecked = document.getElementById("checksms").checked
    var errordiv = document.getElementById('error');
    var errorsms = document.getElementById('errorsms');
        /*postOptOutSix.checked = false;
        postOptOutForever.checked = false*/
    // Conditions
    if (document.getElementById("emailradios") ==null && document.getElementById("emailforever") ==null) {
        if (document.getElementById("smsforever") ==null && document.getElementById("smsforever") ==null) {
            return true;
        }
        else if (document.getElementById("checksms").checked ==false && document.getElementById("smsOptOutSix").checked ==false && document.getElementById("smsOptOutForever").checked ==false) {  
            errordiv.innerHTML += "<p id='errorp' style='color:red;'>*SMS - Please either opt-in post or select either of the options.'";
            return false;
        } else {
            return true;
        }
    }
    else if (document.getElementById("checkemail").checked ==false && document.getElementById("emailOptOutSix").checked ==false && document.getElementById("emailOptOutForever").checked ==false) {  
        errorsms.innerHTML += "<p id='errorp' style='color:red;'>*Email - Please either opt-in post or select either of the options.'";
        return false;
    } else {
        return true;
    }
}
1
shimmy 11 avril 2018 à 17:24

3 réponses

Meilleure réponse

Vous devez séparer les 2 vérifications des conditions, puis vérifier si certaines ont échoué ou non avant de revenir.

Quelque chose comme ça devrait faire l'affaire:

function validateForm () {
    var errors = [];
    // Empty any previous errors
    document.getElementById('error').innerHTML = "";

    // Check for SMS
    if (!document.getElementById("checksms").checked && 
        !document.getElementById("smsOptOutSix").checked && 
        !document.getElementById("smsOptOutForever").checked) {
        // add the SMS error to the array
        errors.push("<p id='errorp' style='color:red;'>*SMS - Please either opt-in post or select either of the options.'");
    }

    // Check for Email
    if (!document.getElementById("checkemail").checked && 
        !document.getElementById("emailOptOutSix").checked && 
        !document.getElementById("emailOptOutForever").checked) {  
        // add the Email error to the array
        errors.push("<p id='errorp' style='color:red;'>*Email - Please either opt-in post or select either of the options.'");
    }

    // Display the error(s) if any
    if (errors.length > 0) {
        errors.forEach(function (err) {
            document.getElementById('error').innerHTML += err;
        });
        return false;
    }

    return true;
}

De plus, j'ai remarqué que id='errorp' est là deux fois. Renommez l'un d'eux.

0
Skwal 12 avril 2018 à 13:41
var emailBoxChecked = document.getElementById("checkemail").checked
var emailBoxChecked = document.getElementById("checksms").checked

Vous définissez la même variable à partir d'éléments différents. Ça ne devrait pas être comme ça?

var emailBoxChecked = document.getElementById("checkemail").checked
var smsBoxChecked = document.getElementById("checksms").checked
0
Ed Manet 11 avril 2018 à 14:31

Utilisez les attributs HTML required et pattern avec inputElement.checkValidity() qui renvoie true ou false. Vous pouvez regarder sur keyup, par exemple, pour vous assurer que toutes les entrées sont valides et si c'est le cas, activez le bouton Soumettre et sinon désactivez-le.

0
Ronnie Royston 11 avril 2018 à 14:37