Question

我制作了一个公式和多个函数来检查不同的输入。这些功能有效。

然后我编写了一个函数CHECKFORMULAIRE（），它使用所有这些函数来检查我们何时提交公式并且应该返回false或true。当我提交带有错误的公式时，我会进入下一页，这不应该发生..

 function verifFormulaire(form){
    var nomOk = verifPseudo(form.nom);
    var prenomOk = verifPseudo(form.prenom);
    var emailOk = verifEmail(form.email);

    var telfixOk = verifTel(form.telfixe);
    var telportOk = verifTel(form.telport);
    var dateOk = verifDateDeNaissance(form.date);

    if (nomOk && prenomOk && emailOk && telfixOk && telportOk && dateOk){
        return true ;
    }
    else {

        alert("Formulaire mal remplie");
        return false;
    }
}

这就是为什么我在.js中测试了这个函数VERIFFORMULAIRE（）来看看会发生什么。

 var form = document.getElementById('myForm');
     alert(verifFormulaire(form));

当我调用VERIFFORMULAIRE（）时，问题是我有其他较小函数的错误，而我之前没有这些函数。

TypeError: champ.style is undefined

当我删除那条有问题的行时，我会收到同类的其他错误：

TypeError: date is undefined

你对如何解决这个问题有所了解吗？

谢谢，

以下是表格：

<html>
<head>
    <title> Formulaire page 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href ="cssformulaire.css">


</head>





<body>



    <form id="myForm" method = post action = formulaire2.php onsubmit =" return verifFormulaire(this)">

        <span class="form_col">     </span>
            <label for="Civilité">Civilité  </label> </br>
            <INPUT id ="Civilité" type="checkbox" name="Civilité" value="Monsieur"> Monsieur
            <INPUT id ="Civilité" type="checkbox" name="Civilité" value="Madame"> Madame
            <span class = "tooltip"> Vous devez sélectionner votre sexe</span>
            </br></br>


            <label for="email">Votre adresse email   </label> </br>
            <INPUT id ="email" type="text" value="<?php  $_SESSION['email'] ?>" name = "email" >
            <span class = "tooltip"> Vous devez sélectionner votre adresse e-mail</span>
            </br></br>

            <label for="datenaissance"> Votre date de naissance </label> </br>
            <input  id="datenaissance" type = "date" name = "datenaissance" onblur = "verifDateDeNaissance(this)"> 
            <span class = "tooltip"> JJ/MM/AAAA</span>
            </br></br>

            <label class = "form_col" for = "nom"> Nom : </label>
            <input id = "nom" type = "text" name = "nom" onclick ="colorselected(this)" onblur="verifPseudo(this);blurselected(this)" >
            <span class = "tooltip"> Plus de 2 caractères</span>
            </br></br>

            <label for="prénom"> Prénom </label> </br>
            <input id="prénom" type = "text" name = "prenom" onclick ="colorselected(this)" onblur="verifPseudo(this);blurselected(this)"> 
            <span class = "tooltip"> Plus de 2 caractères</span>
            </br></br>

            <label for="telfix"> Télephone fixe </label> </br>
            <input id = "telfix" type = "tel" name = "telfixe" onclick = "colorselected(this)" onblur = "verifTel(this)"> 
            <span class = "tooltip"> Format 0XXXXXXXXX</span>
            </br></br>

            <label for="telport"> Télephone portable </label> </br>
            <input id ="telport" type = "tel" name = "telport" onclick = "colorselected(this)" onblur = "verifTel(this)"> 
            <span class = "tooltip"> Format 0XXXXXXXXX</span>
            </br></br>


            <input type="submit" value="Suivant" ></code>

            <INPUT TYPE="reset" NAME="nom" VALUE="Effacer">

    </form>
            <script type="text/javascript" src = "javascriptform.js">






</script>
</body>


<footer>



</footer>



</html>

以下是检查功能：

function surligne(champ, stat){

    if (stat){
        champ.style.backgroundColor = "#fba";


    }
    else 
        champ.style.backgroundColor = "#A9F5A9";
}


function verifPseudo(pseudo){

    if (pseudo.value.length < 3){
        surligne(pseudo, true);
        return false;
    }
    else {
        surligne(pseudo, false);
        return true;

    }
}



function verifTel(tel){
    var regex = /[0-9]{10}/

    if(!regex.test(tel.value)){
        surligne(tel, true);
        return false;
    }
    else {
        surligne(tel, false);
        return true ;
    }
}

function verifDateDeNaissance(date){
    var regex = /[0-9]{2}\/[0-9]{2}\/[1-2][0-9][0-9][0-9]/
    if(!regex.test(date.value)){
        surligne(date, true);
        return false;
    }
    else {
        surligne(date, false);
        return true ;
    }
}

function verifEmail(email){

    var regex = /[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}/;
        if (!regex.test(email.value)){

            surligne(email,true);
            return false;
        }

        else {
            surligne(email, false);
            return true;
        }
}

function colorselected(champ){
    champ.style.borderColor = "#81BEF7";
}
function blurselected(champ){

    champ.style.borderColor="";}

Answer 1

我认为问题是form.date不存在

您可以更改

<input id="datenaissance" type = "date" name = "datenaissance" onblur = "verifDateDeNaissance(this)">

要

<input id="datenaissance" type = "date" name = "date" onblur = "verifDateDeNaissance(this)">

Javascript函数检查公式中的所有输入不起作用

1 个答案: