Html - Form validation error message alert does not appear (JavaScript)

BlueWatterBottle
November 19, 2023
188 views
3 votes
3 Answers

I have a form that, with JS, has an error message that is meant to appear when one or more of the fields in the form are left empty. However, when I click the submit button, nothing appears. HTML:

<body>
    <script type=text/javascript src="script.js"></script>
    <h1>Organisation Score Calculator</h1>
    <!-- 
    <h4>Input the name of the charity.</h4>
    <input type="text" id="nameOfOrganisation">
    <h4>Which state/territory does this organisation service?</h4>
    <input type="text" id="state">
    <h4>What is the ACNC listed size for this organisation?</h4>
    <input type="text" id="size">
    <h4>What percentage of the organisation's total income is from government grants?</h4>
    <input type="text" id="governmentGrants">
    <h4>How much net profit does the organisation make annuallly?</h4>
    <input type="text" id="netProfit">
    <h4>What is the value of the organisation's investments?</h4>
    <input type="text" id="investments">
    <br>
    <br>
    <button onclick="main()">Get score!</button>
    -->
    <form id="regForm">
        <div class="textinput">
            <label for="nameOfOrganisation">Input the name of the organisation.</label><br><br>
            <input id="nameOfOrganisation" type="text" name="nameOfOrganisation"/>
        </div>
        <br>
        <br>
        <br>
        <div class="textinput">
            <label for="state">Which state/territory does this organisation service?</label><br><br>
            <input id="state" type="text" name="state"/>
        </div>
        <br>
        <br>
        <br>
        <div class="textinput">
            <label for="size">What is the ACNC listed size for this organisation?</label><br><br>
            <input id="size" type="text" name="size"/>
        </div>
        <br>
        <br>
        <br>
        <div class="textinput">
            <label for="governmentGrants">What percentage of the organisation's total income is from government grants?</label><br><br>
            <input id="governmentGrants" type="text" name="governmentGrants"/>
        </div>
        <br>
        <br>
        <br>
        <div class="textinput">
            <label for="netProfit">How much net profit does the organisation make annuallly?</label><br><br>
            <input id="netProfit" type="text" name="netProfit"/>
        </div>
        <br>
        <br>
        <br>
        <div class="textinput">
            <label for="investments">What is the value of the organisation's investments?</label><br><br>
            <input id="investments" type="text" name="investments"/>
        </div>
        <br>
        <br>
        <br>
        <input type="submit" value="Get score!">
    </form>
    <p id="namePlaceholder"></p>
    <p id="statePlaceholder"></p>
    <p id="sizePlaceholder"></p>
    <p id="governmentGrantsPlaceholder"></p>
    <p id=netProfitPlaceholder></p>
    <p id="investmentsPlaceholder"></p>
    <h4 id="total"></h4>
</body>

JS:

function validate () {
    var name = docuemnt.getElementById("nameOfOrganisation").value;
    var state = docuemnt.getElementById("state").value;
    var size = document.getElementById("size").value;
    var governmentGrants = document.getElementById("governmentGrants").value;
    var netProfit = document.getElementById("netProfit").value;
    var investments = document.getElementById("investments").value;
    var errMsg = "";                            
    var result = true;

    if (name == "") {
        errMsg += "Name cannot be empty.n";
        }
    if (state == "") {
        errMsg += "State cannot be empty.";
    }
    if (size == "") {
        errMsg += "Size cannot be empty.n";
        }
    if (governmentGrants == "") {
        errMsg += "Government grants cannot be empty.n";
        }
    if (netProfit == "") {
        errMsg += "Net profit cannot be empty.n";
        }
    if (investments == "") {
        errMsg += "Investments cannot be empty.n";
        }

    if (errMsg != "") {
        alert (errMsg);
        result = false;
    } 
    
    return result;
}

function init () {
    var regForm = document.getElementById("regForm");
    regForm.onsubmit = validate();
}

window.onload = init();

I am very new to JS and would appreciate it if anyone could tell me where I’ve gone wrong here. I have tried changing the function calls in init and below it to include brackets but that did not seem to help at all.

Answers

It’s just a simple typo in your code causing it all to fail.
You spelled document as docuemnt, which causes your function to silently throw an error and thus it doesn’t run the rest of the function, causing the alert to never happen.

    var name = document.getElementById("nameOfOrganisation").value;
    var state = document.getElementById("state").value;
    var size = document.getElementById("size").value;
    var governmentGrants = document.getElementById("governmentGrants").value;
    var netProfit = document.getElementById("netProfit").value;
    var investments = document.getElementById("investments").value;

You will still face another problem when you fix this… And that is that the form will still run as if it were successful and valid data. So you will want to update your function to include an event parameter and prevent the default action (of a successful submition). That is usually referenced as e.preventDefault() but could be event.preventDefault() if you named your parameter event. Your JS code would look like this with that in place.

function validate (e) {
    var name = document.getElementById("nameOfOrganisation").value;
    var state = document.getElementById("state").value;
    var size = document.getElementById("size").value;
    var governmentGrants = document.getElementById("governmentGrants").value;
    var netProfit = document.getElementById("netProfit").value;
    var investments = document.getElementById("investments").value;
    var errMsg = "";                            
    var result = true;

    if (name == "") {
        errMsg += "Name cannot be empty.n";
        }
    if (state == "") {
        errMsg += "State cannot be empty.";
    }
    if (size == "") {
        errMsg += "Size cannot be empty.n";
        }
    if (governmentGrants == "") {
        errMsg += "Government grants cannot be empty.n";
        }
    if (netProfit == "") {
        errMsg += "Net profit cannot be empty.n";
        }
    if (investments == "") {
        errMsg += "Investments cannot be empty.n";
        }

    if (errMsg != "") {
        alert (errMsg);
        result = false;
        e.preventDefault(); //Important.
    } 
    
    return result;
}

function init () {
    var regForm = document.getElementById("regForm");
    regForm.onsubmit = validate; //assign function don't call it.
}

window.onload = init();

You can read more about this here

- MisterJojo
- November 19, 2023 at 2:55 pm
- 0 votes
0
first of all change
```
<body>
  <script type=text/javascript src="script.js"></script>
  <h1>Organisation Score Calculator</h1>
  <!-- ...
```
to
```
 <script type=text/javascript src="script.js" defer></script>
</head>
<body>
  <h1>Organisation Score Calculator</h1>
  <!-- ...
```
move script reference inside the <html><head> part, with the defer attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer
Login or Signup to reply.

You could make the validate function slightly more refined if you were to remove all the hardcoded references to input fields and use a loop. You can easily find all the input elements within the form – document.querySelectorAll is ideal for this task or you could use the older form.elements and iterate through that nodelist.

Either way you can apply the same logic test ( in this case you test for empty strings ) whilst iterating though the nodelist. In the below I opted for adding errors to an array but string concatenation is a valid alternative.

// reference to named form
const form=document.forms.reg;

// resetfields simply removes an error classList item from every form input.
const resetfields=(p)=>p.querySelectorAll('.error').forEach(n=>n.classList.remove('error'));

//  seterror - apply error classList item
const seterror=(n)=>n.classList.add('error');



const validate=(e)=>{
  resetfields( e.target );
  
  let result=true;
  let errors=[];

  //  find all inputs, perform any/all tests on 
  //  data and add errors to output array/string
  form.querySelectorAll('input').forEach(n=>{
    if( n.value=='' ){
      errors.push( `"${n.dataset.alt}" cannot be empty!` );
      seterror(n);
    }
  });
  
  // If there are errors, let the user know
  if( errors.length > 0 ){
    e.preventDefault();
    result=false;
    
    setTimeout(()=>{
      alert( errors.join( String.fromCharCode(10) ) )
    },100);
  }
  
  return result;
}


// Set the event listener
form.addEventListener('submit',validate);

form > div{
  margin:1.25rem auto;
}
label{
  margin:0 0 0.75rem 0;
  display:block;
}
.error{
  background:rgba(255,0,0,0.1);
  border:2px solid rgba(255,0,0,0.5);
}
p{
  margin:0 0 0.25rem 0;
}
[data-label]:before{
  content:attr(data-label);
}

<h1>Organisation Score Calculator</h1>

<form name='reg' id="regForm" method='post'>
  <div class="textinput">
    <label for="nameOfOrganisation">Input the name of the organisation.</label>
    <input id="nameOfOrganisation" type="text" name="nameOfOrganisation" data-alt='Organisation Name' />
  </div>

  <div class="textinput">
    <label for="state">Which State/Territory does this organisation service?</label>
    <input id="state" type="text" name="state" data-alt='State' />
  </div>

  <div class="textinput">
    <label for="size">What is the ACNC listed size for this organisation?</label>
    <input id="size" type="text" name="size" data-alt='Size' />
  </div>

  <div class="textinput">
    <label for="governmentGrants">What percentage of the organisation's total income is from Government Grants?</label>
    <input id="governmentGrants" type="text" name="governmentGrants" data-alt='Government Grants' />
  </div>

  <div class="textinput">
    <label for="netProfit">How much NET profit does the organisation make annually?</label>
    <input id="netProfit" type="text" name="netProfit" data-alt='NET Profit' />
  </div>

  <div class="textinput">
    <label for="investments">What is the value of the organisation's investments?</label>
    <input id="investments" type="text" name="investments" data-alt='Investments' />
  </div>

  <input type="submit" value="Get score!">
</form>



<p id="namePlaceholder"></p>
<p id="statePlaceholder"></p>
<p id="sizePlaceholder"></p>
<p id="governmentGrantsPlaceholder"></p>
<p id="netProfitPlaceholder"></p>
<p id="investmentsPlaceholder"></p>
<h4 id="total"></h4>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Form validation error message alert does not appear (JavaScript)

Answers