Je souhaite transmettre différents identifiants d'élément avec la même fonction

function validate(idname, spnname) {
  var getId = document.getElementById(idname);
  if(getId === null || getId === undefined || getId === "") {
    var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
  }
}
validate('firstname', 'spnfirstname');

<body>
  <h1>SUBSCRIBE</h1>
  <form id="frml" method="get" >
    <input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br />
    <input type="text" name="lname" placeholder="Last Name" s="textbox" id="lastname"/><span id="spnlastname"></span><br />
    <input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
    <span id="spnbirthday"></span><br />
    <input type="email" name="" placeholder="someone@example.com" class="textbox" id="email"/><span id="spnemail"></span><br />
    <input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br />
    <input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br />
    //is there another way to do this onClick event in javascript that may help?
    <input id ="btn" type="button" value="Submit" onClick = "return validate()"/>
  </form>
</div>

Je reçois une erreur pour ma deuxième var et mon html onClick. Ma question est différente car il n'y a pas de réponse ici pour répondre correctement à ce problème. J'ai tout essayé. Je n'ai aucune idée de la raison pour laquelle je reçois ce message d'erreur.

0
Samuel M. King 15 janv. 2017 à 06:34

2 réponses

Meilleure réponse

Deux choses:

1.- Utilisez la propriété 'value' pour obtenir la valeur réelle de l'entrée:

var getId = document.getElementById(idname).value;

2.-Définissez la fonction sur l'événement 'click', addEventListener peut être utile si vous souhaitez utiliser du javaScript brut, juste après le formulaire:

<script>
 document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>

C'est ainsi que je le fais fonctionner.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <script>
        function validate(idname, spnname){
           var getId = document.getElementById(idname).value;
            console.log(getId);
            if(getId === null || getId === undefined || getId === ""){
                var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
            }
        }
    </script>
    </head>
    <body>
        <h1>SUBSCRIBE</h1>
        <form id="frml" method="get">
            <input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br/>
            <input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname"/><span id="spnlastname"></span><br/>
            <input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
            <span id="spnbirthday"></span><br/>
            <input type="email" name="" placeholder="someone@example.com" class="textbox" id="email"/><span id="spnemail"></span><br/>
            <input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br/>
            <input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br/>
            //is there another way to do this onClick event in javascript that may help
            <input id ="btn" type="button" value="Submit"/>
        </form>
        <script>
            document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
        </script>
    </body
</html>
0
Erick Medina 15 janv. 2017 à 04:24

Si vous essayez de valider tous vos éléments lors de la soumission, cliquez sur.

Vous pouvez tout sélectionner à l'aide de querySelector, puis vérifier chaque élément pour sa valeur. Si la valeur est "", modifiez le paramètre innerHTML de l'élément span frère.

var submit = document.querySelector("#btn")

submit.addEventListener("click", function() {


  var elements = document.querySelectorAll("input");

  for (var i = 0; i < elements.length; i++) {
    if (elements[i].value === "") {

      elements[i].nextElementSibling.innerHTML = "Required Field";

    }
  }
});
<body>

  <h1>SUBSCRIBE</h1>


  <form id="frml" method="get">

    <input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname" /><span id="spnfirstname"></span>
    <br />

    <input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname" /><span id="spnlastname"></span>
    <br />

    <input type="date" name="Birthday" value="" class="textbox" id="birthday" />

    <span id="spnbirthday"></span>
    <br />

    <input type="email" name="" placeholder="someone@example.com" class="textbox" id="email" /><span id="spnemail"></span>
    <br />

    <input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep" /><span id="spnhomep"></span>
    <br />

    <input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp" /><span id="spncellp"></span>
    <br />

    <input id="btn" type="button" value="Submit" />

  </form>

  </div>
0
Deep 15 janv. 2017 à 04:26