A single, powerful JavaScript function for validating input fields on web forms

Looking to streamline my code by creating a function that checks if an input field is empty before sending the data to Php via Ajax. The function should return true or false and display an error message if needed. However, I'm facing an issue when dealing with two fields in the if statement. Here's what I have so far:

const email = document.getElementById('username');
const password = document.getElementById('password');

if(verifyInput(email) && verifyInput(password)) {
    console.log('Ready');
}

The problem arises when one field is empty, as the function call for the second field does not get executed.

To work around this issue, I've resorted to using a multiplication operation:

if(verifyInput(email) * verifyInput(password)) {
      console.log('Ready');
}

I'm curious if there is a more efficient solution to handle this situation.

Thanks!

Answer №1

If you're looking for a solution, consider trying the following approach:

let credentials = [email, password];
if(credentials.map(validateInput).every(Boolean)) {
  console.log('All inputs are valid');
}

To validate the inputs, store them in an array and then use the validateFunction to check each item. This will create an array of boolean values that can be tested using every(Boolean).

Answer №2

&& logical operator follows a left-to-right evaluation and also has the ability to "short-circuit". This means that when an operand is false, there is no need to continue evaluating the rest of the operands as the result will be false.

Consider using & instead:

verifyInput(email) & verifyInput(password)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a pair of errors while working with Node.js and Express

(Apologies for the vague title) I have been developing a project using Firebase and Express, but I am encountering some issues. src/index.js import { initializeApp } from "firebase/app"; import { doc, getFirestore } from "firebase/firesto ...

What is the best way to avoid repeated guesses in a number guessing game?

I've implemented an array named 'tries' to keep track of the numbers guessed by the user. Once the user correctly guesses the number, the total number of tries and the guessed numbers are displayed. How can I prevent the user from guessing a ...

Is there a way for me to gain entry to this array in vuejs?

Can anyone help me with accessing the objects in this array? I am using laravel, inertiajs, and vuejs. I am passing a variable from a laravel controller to a vuejs component with inertia.js. https://i.stack.imgur.com/p7yjL.png https://i.stack.imgur.com/y ...

Printing Multiple Pages Using JavaScript and Cascading Style Sheets

Encountering difficulties displaying page numbers when printing multiple multipage reports Here is the provided HTML Format : <style type="text/css> body { counter-reset: report 1 page 0; } td.footer:after { counter-increment: page; content ...

Issues with managing ajax response handlers

Just dipping my toes into the world of ajax and attempting to create a reusable ajax request function. According to Firebug, the request is successfully fetching the correct data from my php file. However, for some reason, the response isn't getting i ...

The issue with fancybox links not functioning properly within ajax content

I'm looking to constantly update a specific section on my website using ajax, jquery, and php. Upon the initial page load, a javascript function is triggered to display the content of that section. Subsequently, json is utilized to check for any new ...

Converting JavaScript to JSON and saving dynamic properties

Having a basic knowledge in JavaScript, I am attempting to extract data from users and utilize it as JSON properties in the following format: <th colspan="2"><input id="dc_name" name='dc[name]'></input></th> $ ...

Developing with TypeScript, Next.js, and Socket.io

Embarking on a new endeavor utilizing TypeScript, Next.js, and Socket.io has left me puzzled on how to integrate these technologies seamlessly. My project consists of the following files: /api/socket.ts: import { NextApiRequest, NextApiResponse } from &ap ...

Ways to get to the bottom in a React component using a button

I've been struggling to automatically scroll the user to the bottom of the page when they click on a button. Despite my best efforts, I haven't been able to find a solution. Can someone please assist me in achieving this goal? Thank you ...

Error: The value property is undefined and cannot be read at the HTMLButtonElement

I'm currently working on a project where I need to display a dropdown menu of buttons using Pug in order to render an HTML page. To achieve this, I am using the getElementsByClassName('dropdown-item') method to retrieve all the buttons in an ...

Unable to retrieve data when utilizing SWR and Context API in Next.js

I'm currently working on fetching data from an API using SWR and dynamically setting the currency based on user preferences through context API. However, I'm facing issues as I am unable to view any data. Can someone please provide assistance or ...

Tips for deactivating dropdown values based on the selection of another dropdown

There are two dropdown menus known as minimum and maximum, each containing numbers from 1 to 25. If a value is selected from the minimum dropdown (e.g. 4), the maximum dropdown should only allow values that are equal to or greater than the selected value ...

Troubleshooting Angular: Unidentified property 'clear' error in testing

I've implemented a component as shown below: <select #tabSelect (change)="tabLoad($event.target.value)" class="mr-2"> <option value="tab1">First tab</option> <op ...

Using Python Webdriver to Execute JavaScript File and Passing Arguments to Functions

How can I execute a JavaScript function and pass arguments to it? value = driver.execute_script(open("path/file.js").read()) I have successfully executed the file, but I am unsure of how to pass arguments to the function within it. Any suggestions would ...

VueJS - Input Image Display Issue Causing Browser Slowdown

I'm experiencing some issues with my VueJS component that includes a file input and displays an image afterwards. Strangely, this is causing my web browsers (both Firefox and Chromium) to freeze up and use massive amounts of CPU. I tried switching to ...

Combining HTML, CSS, JAVASCRIPT, and PHP for a seamless web development experience

As a beginner in web development, I have some knowledge of javascript, html, css and am currently delving into php. However, I am struggling to find comprehensive resources that show how to integrate all these languages together. I would greatly appreciat ...

What are the steps to incorporate an iframe containing uniquely designed XML content?

I'm currently working on a website project for a client who specifically wants to include news from the BBC. Despite spending 3 hours searching online, I haven't been able to successfully insert an XML file into an iframe and style it to the clie ...

In my code, I never use the term "require", yet webpack continues to generate the error message "require is not defined."

I am in the process of developing an electron app using react. To run the development version, I use the following command: webpack-dev-server --hot --host 0.0.0.0 --port 4000 --config=./webpack.dev.config.js Displayed below is the webpack.dev.config.js ...

Unveiling Insights from a JSON File: Data Extraction

I have a JSON file named pio2.json that contains the following data: { "controles":[{ "chart":[{ "type":"columns", "title":"Pollitos" }], "datos":[{"key":"Math","value":98}, {"key":"Physics" ...

The current date object in JavaScript will only display the year or a combination of the month and

$scope.articles = [ { link: "http://google.com", source: "Google", title: "hello", "date": new Date(2008, 4, 15) }, ]; <tbody> <tr ng-repeat = "article in articles | orderBy:sortType:sortReverse | filter:searchArticle ...