Trying to validate my form with error messages, doesn't seem to work

Question

I want to pass in different element IDs with the same function

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>

I am receiving an error for my second var and my html onClick. My question is different because there is no answer here responding to this issue correctly. I have tried everything. I have no idea why I am getting this error message.

Answer 1

If you are trying to validate all your elements on submit click.

You can select all using querySelector and and then check each element for its value. If value is "" then change the innerHTML of sibling span element.

 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>

Answer 2

Two things:

1.- Use the 'value' property to get the actual value from the input:

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

2.-Set the function to the 'click' event, addEventListener can be useful if you want to use plain javaScript, just right after the form:

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

This is how i get it work.

<!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>

Trying to validate my form with error messages, doesn't seem to work

Question

2 answers

solution1
0 2017-01-15 03:57:18

solution2
0 ACCPTED 2017-01-15 04:24:12

Trying to validate my form with error messages, doesn't seem to work

Question

2 answers

solution1 0 2017-01-15 03:57:18

solution2 0 ACCPTED 2017-01-15 04:24:12

solution1
0 2017-01-15 03:57:18

solution2
0 ACCPTED 2017-01-15 04:24:12