I am currently facing an issue with validating forms in JavaScript Document Object Model (DOM)

Question

I am currently facing an issue with validating forms in JavaScript Document Object Model (DOM)

Whenever I click on a field and move to another one, the span tag turns red. Then, after pressing the submit button, an alert message pops up. However, if I turn the span red, fill in the field, and press the submit button, it shows success even if other fields are left blank.


const regForm = document.getElementById('regForm');
var validObjects = document.querySelectorAll('[customValidate]');
validObjects.forEach(function(element) {
    element.addEventListener('blur', function() {
        var emoji = element.previousElementSibling;
        var label = emoji.previousElementSibling;

        if (!element.value) {
            emoji.className = "far fa-frown float-right  text-danger";
            var span = document.createElement("span");
            span.innerHTML = "&emsp;* Required";
            span.style.color = "red";
            if (!label.getElementsByTagName("span")[0])
                label.appendChild(span);
            isValid = false;
        } else {
            emoji.className = "far fa-smile float-right  text-success";
            var span = label.getElementsByTagName("span")[0];
            if (span)
                label.removeChild(span);
            isValid = true;
        }
    });
});
regForm.addEventListener('submit', function(event) {
    event.preventDefault();
    var isValid = true;

    validObjects.forEach(function(element) {
        isValid = element.value ? true : false;
    })
    if (!isValid) {
        alert("empty!");
    } else {
        alert("success!");
    }
});

JSFiddle: https://jsfiddle.net/roop06/cjmdabrf/

javascript html css

Answer 1

Answer №1

since the value of isValid will only be determined by the last item in the forEach loop

validObjects.forEach(function(element) {
    isValid = element.value ? true : false; // changes false to true on the final iteration
})

If you prefer using forEach but want to retain the previous state of isValid, you can code it like this:

var isValid = true;
validObjects.forEach(function(element) {
    isValid = element.value ? isValid : false;
})

Alternatively, if you are only checking for validity without any additional tasks in the loop, a more efficient approach is to use the every method which stops at the first false occurrence.

var isValid = validObjects.every(function (element) {
  return element.value.length
})

var form = document.querySelector('form');
var validObjects = Array.from(document.querySelectorAll('[customValidate]'));
form.addEventListener("submit", function (e) {
  var isValid = validObjects.every(function (element) {
    return element.value.length
  })
  return isValid
})

<form>
  <input customValidate>
  <input customValidate>
  <input customValidate>
  <button>submit</button>
</form>

Alternatively, you can utilize the built-in HTML5 validation feature with required attribute and rely on the browser for validation.

<form>
  <input customValidate required>
  <input customValidate required>
  <input customValidate required>
  <button>submit</button>
</form>

Answer 2

since the value of isValid will only be determined by the last item in the forEach loop

validObjects.forEach(function(element) {
    isValid = element.value ? true : false; // changes false to true on the final iteration
})

If you prefer using forEach but want to retain the previous state of isValid, you can code it like this:

var isValid = true;
validObjects.forEach(function(element) {
    isValid = element.value ? isValid : false;
})

Alternatively, if you are only checking for validity without any additional tasks in the loop, a more efficient approach is to use the every method which stops at the first false occurrence.

var isValid = validObjects.every(function (element) {
  return element.value.length
})

var form = document.querySelector('form');
var validObjects = Array.from(document.querySelectorAll('[customValidate]'));
form.addEventListener("submit", function (e) {
  var isValid = validObjects.every(function (element) {
    return element.value.length
  })
  return isValid
})

<form>
  <input customValidate>
  <input customValidate>
  <input customValidate>
  <button>submit</button>
</form>

Alternatively, you can utilize the built-in HTML5 validation feature with required attribute and rely on the browser for validation.

<form>
  <input customValidate required>
  <input customValidate required>
  <input customValidate required>
  <button>submit</button>
</form>

Answer 3

Answer №2

Give this a shot

CodePen

checkObjects.forEach(function(item) {
       if(!(item.input)){
        isCorrect = false;
       }
    })

Answer 4

Give this a shot

CodePen

checkObjects.forEach(function(item) {
       if(!(item.input)){
        isCorrect = false;
       }
    })

Answer 5

Answer №3

Your issue arises from the fact that when the last field is valid, the isValid flag remains true indefinitely. To resolve this, you can modify your logic to cease setting the flag once an invalid field has been identified:

validObjects.forEach(function (element) {
    if (isValid) {
        isValid = element.value ? true : false;
    }
});

Answer 6

Your issue arises from the fact that when the last field is valid, the isValid flag remains true indefinitely. To resolve this, you can modify your logic to cease setting the flag once an invalid field has been identified:

validObjects.forEach(function (element) {
    if (isValid) {
        isValid = element.value ? true : false;
    }
});

I am currently facing an issue with validating forms in JavaScript Document Object Model (DOM)

Answer №1

Answer №2

Answer №3

Similar questions

A guide on resolving the TypeError 'download property of undefined' issue when using Puppeteer with browser.downloads.download

Tips for muting console.log output from a third-party iframe

Navigating through states in AngularJS

Page jumping vertically in Chrome upon reload, with Firefox and Internet Explorer functioning properly

The callback function in AngularJS filters

Verify that the text entered in the form is accurate, and if it meets the required criteria, proceed to the next

Tips on implementing v-show within a loop

Console displays 'undefined' when using the post method with Node.js/Express

The issue of CSS not being connected properly on Github

How can I detect a change in user input using jQuery?

What is the correct way to define the onClick event in a React component?

developing a loading animation with progress indicator in CSS3

Chrome is experiencing a problem with anchor tags that have an href attribute set to a "blob:" URL and using a target of "_blank"

I keep running into errors whenever I try to run npm install in my React JS project. The only way for me to successfully install dependencies is by using npm install --force. How can I go about resolving these

Having trouble retrieving information from Node.js service in AngularJS 2

Checking for valid zip code using a regular expression in JavaScript

How can you connect a property to the output of a method in Vue.js when working with TypeScript and vue-property-decorator?

Exploring the wonders of Angular 2: Leveraging NgbModal for transclusion within

All you need to know about the jQuery .css method

Creating layered images with CSS Grid