Ways to implement form validation with JavaScript

Question

Ways to implement form validation with JavaScript

I'm currently working on a project for my digital class and I'm facing an issue with my booking form. I have two functions that need to execute when a button is clicked - one function validates the form to ensure all necessary fields are filled out, while the other runs the main loop. Despite looking through various resources online, I haven't been able to figure it out yet.

I attempted adding the validForm function within the main loop so that it runs first before the loop. Then, I tried running just the main loop without the validForm function, but it ran the loop first and then checked for the required forms (I actually need it to check for required forms first and then run the loop). It's proving to be quite challenging for me.

--- condensed code snippet (html) ---

<form id="thisForm" method="post" name="thisForm" onsubmit="validForm()">
<label>First name:</label> <input autocomplete="on" id="firstNameInput" placeholder="John" required="" title="Enter your first name" type="text"><br>
<label>Last name:</label> <input autocomplete="on" id="lastNameInput" placeholder="Smith" required="" title="Enter your last name" type="text"><br>
<label>Age:</label> <input autocomplete="on" id="ageInput" placeholder="18" required="" title="Enter your age" type="number"><br>
<label>Email address:</label> <input autocomplete="on" id="emailInput" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80eaefe8eef3ede9f4e8c0e7ede1e9ecaee3efed">[email protected]</a>" required="" title="Enter your email address" type="email">
<button class="button button1" id="submit" onsubmit="loopForm(form)">Confirm Booking</button>
<button class="button button2" id="reset" onclick="index.html">Reset</button>
</form>

--- condensed javascript logic ---

function validForm() {
  var x = document.forms["myForm"]["numberOfDays"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

function loopForm(form) { // Function executed upon clicking confirm button to send data to firebase
    alert('Test alert for confirm booking');
    var amountOfDays = numberOfDays.value;
    var insuranceFee = 20;
    var BOOKINGFEE = 50;
    var sum = 0 ;
    var cbResults = ' ';
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                vehicleResult = form.elements[i].value;
                vehicleCost = form.elements[i].dataset.price;
                insuranceCost = Math.round(insuranceFee + vehicleCost * amountOfDays);
                outputDays.innerHTML = amountOfDays; 
                outputTest.innerHTML = insuranceCost; 
                outputVehicle.innerHTML = vehicleResult; 
            }
        }
        if (form.elements[i].type == "checkbox") {
            if (form.elements[i].checked == true) {
                cbResults += form.elements[i].value + ', ';
                sum = sum + parseInt(form.elements[i].dataset.price);
                alert(cbResults + "$" + sum);
                outputExtras.innerHTML = cbResults;
                totalCost = Math.round(insuranceCost + sum + BOOKINGFEE); 
                outputCost.innerHTML = '$' + totalCost;
            }
        }
    }
}

I am anticipating the output to lead to a booking summary page instead of refreshing once the page checks for required fields. Currently, the page refreshes before I get to view the booking summary.

javascript forms validation

Answer 1

Answer №1

Your validForm function is attempting to access a form (myForm) and an input field (numberOfDays) that do not exist in your HTML code, resulting in an error being thrown.

Instead of

var x = document.forms["myForm"]["numberOfDays"].value;

try using

var form = document.forms["thisForm"]; //will return form

and in your HTML code, provide each input field with a unique name so it can be accessed using the form object.

I have assigned a name to each input field, allowing you to access its value by name. For instance, to access the first name, use form.fName.value.

I have updated both your HTML code and validation function:

function validForm() {
    var form = document.forms["thisForm"]
    var fName = form.fName.value;
    var lName = form.lName.value;
    var age =form.age.value;
    var email = form.email.value;
    if (fName == "") {
        alert("First name must be filled out");
        return false;
    }
    if (lName == "") {
        alert("Last name must be filled out");
        return false;
    }
    if (age == "") {
        alert("Age must be filled out");
        return false;
    }
    if (email == "") {
        alert("Email must be filled out");
        return false;
    };
    
    //call your next function here
    //loopForm(form);
}

<form id="thisForm" method="post" name="thisForm" onsubmit="return validForm()">
      <label>First name:</label>
      <input name="fName" autocomplete="on" id="firstNameInput" placeholder="John"  title="Enter your first name" type="text"><br>

      <label>Last name:</label>
      <input name="lName" autocomplete="on" id="lastNameInput" placeholder="Smith" title="Enter your last name" type="text"><br>

      <label>Age:</label>
      <input name="age" autocomplete="on" id="ageInput" placeholder="18"  title="Enter your age" type="number"><br>

      <label>Email address:</label>
      <input name="email" autocomplete="on" id="emailInput" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e040106001d03071a062e09030f0702400d0103">[email protected]</a>"  title="Enter your email address" type="email">

      <button class="button button1" id="submit" >Confirm Booking</button>

      <button class="button button2" id="reset" onclick="index.html">Reset</button>
</form>

Answer 2

Your validForm function is attempting to access a form (myForm) and an input field (numberOfDays) that do not exist in your HTML code, resulting in an error being thrown.

Instead of

var x = document.forms["myForm"]["numberOfDays"].value;

try using

var form = document.forms["thisForm"]; //will return form

and in your HTML code, provide each input field with a unique name so it can be accessed using the form object.

I have assigned a name to each input field, allowing you to access its value by name. For instance, to access the first name, use form.fName.value.

I have updated both your HTML code and validation function:

function validForm() {
    var form = document.forms["thisForm"]
    var fName = form.fName.value;
    var lName = form.lName.value;
    var age =form.age.value;
    var email = form.email.value;
    if (fName == "") {
        alert("First name must be filled out");
        return false;
    }
    if (lName == "") {
        alert("Last name must be filled out");
        return false;
    }
    if (age == "") {
        alert("Age must be filled out");
        return false;
    }
    if (email == "") {
        alert("Email must be filled out");
        return false;
    };
    
    //call your next function here
    //loopForm(form);
}

<form id="thisForm" method="post" name="thisForm" onsubmit="return validForm()">
      <label>First name:</label>
      <input name="fName" autocomplete="on" id="firstNameInput" placeholder="John"  title="Enter your first name" type="text"><br>

      <label>Last name:</label>
      <input name="lName" autocomplete="on" id="lastNameInput" placeholder="Smith" title="Enter your last name" type="text"><br>

      <label>Age:</label>
      <input name="age" autocomplete="on" id="ageInput" placeholder="18"  title="Enter your age" type="number"><br>

      <label>Email address:</label>
      <input name="email" autocomplete="on" id="emailInput" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e040106001d03071a062e09030f0702400d0103">[email protected]</a>"  title="Enter your email address" type="email">

      <button class="button button1" id="submit" >Confirm Booking</button>

      <button class="button button2" id="reset" onclick="index.html">Reset</button>
</form>

Answer 3

Answer №2

To consolidate your code, create a single function that houses all of your form validation logic. Move your validform code into the loopform function and handle the validation checks within the loop. If the form is not valid, return false as shown in the function below:

function loopForm(form) { 
    var x = document.forms["myForm"]["numberOfDays"].value;
    if (x == "") 
     {
       alert("Name must be filled out");
        return false;
     }
    alert('Test alert for confirm booking');
    var amountOfDays = numberOfDays.value;
    var insuranceFee = 20;
    var BOOKINGFEE = 50;
    var sum = 0 ;
    var cbResults = ' ';
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                vehicleResult = form.elements[i].value;
                vehicleCost = form.elements[i].dataset.price;
                insuranceCost = Math.round(insuranceFee + vehicleCost * amountOfDays);

                outputDays.innerHTML = amountOfDays; 
                outputTest.innerHTML = insuranceCost; 
                outputVehicle.innerHTML = vehicleResult; 
            }
        }
        if (form.elements[i].type == "checkbox") {
            if (form.elements[i].checked == true) {
                cbResults += form.elements[i].value + ', ';
                sum = sum + parseInt(form.elements[i].dataset.price);
                alert(cbResults + "$" + sum);
                outputExtras.innerHTML = cbResults;
                totalCost = Math.round(insuranceCost + sum + BOOKINGFEE); //devired values
                outputCost.innerHTML = '$' + totalCost;
            }
        }
    }

return true;
}

Answer 4

To consolidate your code, create a single function that houses all of your form validation logic. Move your validform code into the loopform function and handle the validation checks within the loop. If the form is not valid, return false as shown in the function below:

function loopForm(form) { 
    var x = document.forms["myForm"]["numberOfDays"].value;
    if (x == "") 
     {
       alert("Name must be filled out");
        return false;
     }
    alert('Test alert for confirm booking');
    var amountOfDays = numberOfDays.value;
    var insuranceFee = 20;
    var BOOKINGFEE = 50;
    var sum = 0 ;
    var cbResults = ' ';
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                vehicleResult = form.elements[i].value;
                vehicleCost = form.elements[i].dataset.price;
                insuranceCost = Math.round(insuranceFee + vehicleCost * amountOfDays);

                outputDays.innerHTML = amountOfDays; 
                outputTest.innerHTML = insuranceCost; 
                outputVehicle.innerHTML = vehicleResult; 
            }
        }
        if (form.elements[i].type == "checkbox") {
            if (form.elements[i].checked == true) {
                cbResults += form.elements[i].value + ', ';
                sum = sum + parseInt(form.elements[i].dataset.price);
                alert(cbResults + "$" + sum);
                outputExtras.innerHTML = cbResults;
                totalCost = Math.round(insuranceCost + sum + BOOKINGFEE); //devired values
                outputCost.innerHTML = '$' + totalCost;
            }
        }
    }

return true;
}

Ways to implement form validation with JavaScript

Answer №1

Answer №2

Similar questions

Unable to access a function from a different controller within an AngularJS Ionic framework application

Collaborative session sharing between two node applications through Single Sign-On (SSO

Speed up - Handle alias resolution with module federation

Troubleshooting issue: Looping through array in Node.js with Express, JSON, and Handlebars not functioning correctly with

Encountering an error saying "Cannot read property 'x' of null when using Google Charts LineChart"

Is it secure to use console.time() in a Node.js environment?

Having trouble syncing a controller with AngularJS

Disable the submit form in AngularJS when the start date and end date are not valid

Split the array into several arrays based on a specific threshold

Update information in a table row and store it in the database using Ajax

What is the best way to retrieve an input value and store it as a variable in AngularJS?

Tips for transferring variables as arguments in javascript

Using the setTimeout function with asynchronous tasks

Fetch JSON information from various servers/domains through ajax requests

Why won't the click event work in Vue when using v-if or v-show?

Is it wrong to use <match v-for='match in matches' v-bind:match='match'></match>? Am I allowed to incorporate the match variable from the v-for loop into the v-bind attribute on the

Transforming JSON data into an interactive table with HTML

My JavaScript functions are not compliant with the HTML5 required tag

Angular2: Dynamically switch between selected checkboxes in a list

Attempting to deploy my initial Google Cloud Function, encountering an error message indicating that Express is not detected