How to make all input fields be required before submitting a form?

Question

I'm new at JavaScript.

So what I am trying to do is to use pure JavaScript to check validation of input fields of a form. Trouble is, I am using span to create the "*Required" on the right side of the input, but only one appears at last name.

I want to make both fields have the span "*Required" show up for both inputs when they are empty when the form is submitted. Also when only one is empty, make only that one "*Required".

I appreciate any feedback and advice you guys can give me.

<!DOCTYPE html>
<html>


    <title></title>
    <head>

    </head>

    <body>
    <form id = fourm>
    <label>First Name:</label><br>
        <input id="id1" type="text" name="firstname"><span id="demo" style="color:red"></span><br>
    <label>Last Name:</label><br>
        <input id="id2" type="text"  name ="lastname"><span id="dema" style="color:red"></span><br>
    <br><button onclick="myFunction()">Submit</button>
    </form>

    </body>

</html> 



<script>
function myFunction() {
    if (!document.getElementById("id1").value) {
        document.getElementById("demo").innerHTML = "*Required";
        document.getElementById("fourm").addEventListener("click", function(event){
    event.preventDefault() });

    } else if (document.getElementById("id1").value){
    document.getElementById("demo").innerHTML = "";
    return fourm;
    } 
} 

function myFunction() {
    if (!document.getElementById("id2").value) {
        document.getElementById("dema").innerHTML = "*Required";
        document.getElementById("fourm").addEventListener("click", function(event){
    event.preventDefault() });

    } else if (document.getElementById("id2").value){
    document.getElementById("dema").innerHTML = "";
    return fourm;
    } 
} 

</script>

Answer 1

You have duplicate function definitions!

A function declaration is semantically equivalent to the function expression below.

var myFunction = function() {}

if you had coded as below

myFunction = 1;
var myFunction = function() {/*1*/};
var myFunction = function() {/*2*/};

it would be transformed by the JS engine to something equivalent as below due to variable hoisting

var myFunction;

myFunction = 1;
myFunction = function() {/*1*/};
myFunction = function() {/*2*/};

Function declarations though are hoisted to the top in javascript hence allowing you to call them before they are declared.
When you have duplicate function declarations, as in your case, the first declaration gets replaced by the second function declaration due to hoisting and you lose the logic in the first.
For the following code

myFunction =1;
function myFunction() {/*1*/}; 
function myFunction() {/*2*/};

You can think of it as below.

var myFunction;                //Hoist the variable to top   
myFunction = function() {/*1*/};//Hoist the first function to top and assign
myFunction = function() {/*2*/};//Hoist the second function to top and assign
myFunction = 1;                //Assignment order changes

With function declarations, the function is completely hoisted to the top with no consideration to where it was lexically defined. With function expressions, only the function variable gets hoisted, the function assignment is retained at the lexical location.

 function myFunction() { //Reset error messages document.getElementById("demo").innerHTML = ""; document.getElementById("dema").innerHTML = ""; if (!document.getElementById("id1").value) { document.getElementById("demo").innerHTML = "*Required"; document.getElementById("fourm").addEventListener("click", function(event) { event.preventDefault() }); } else if (document.getElementById("id1").value) { document.getElementById("demo").innerHTML = ""; } if (!document.getElementById("id2").value) { document.getElementById("dema").innerHTML = "*Required"; document.getElementById("fourm").addEventListener("click", function(event) { event.preventDefault() }); } else if (document.getElementById("id2").value) { document.getElementById("dema").innerHTML = ""; } return false; }

 <!DOCTYPE html> <html> <title></title> <head> </head> <body> <form id="fourm"> <label>First Name:</label> <br> <input id="id1" type="text" name="firstname"><span id="demo" style="color:red"></span> <br> <label>Last Name:</label> <br> <input id="id2" type="text" name="lastname"><span id="dema" style="color:red"></span> <br> <br> <button onclick="myFunction()">Submit</button> </form> </body> </html>

How to make all input fields be required before submitting a form?

Question

1 answers

solution1
1 ACCPTED 2016-03-24 00:52:18

How to make all input fields be required before submitting a form?

Question

1 answers

solution1 1 ACCPTED 2016-03-24 00:52:18

solution1
1 ACCPTED 2016-03-24 00:52:18