Unleashing the Power of the "OR" Operator in Form Field Validation

The custom JavaScript function FormQuote_Validator is used to validate form fields. It should return the value "TRUE" and display an alert message if all three input fields are submitted without any numbers; otherwise, it should return the value "FALSE".

Here is an example of the associated HTML code:

<form id="gform_1" enctype="multipart/form-data" method="post" action="">
<div>
  <li id="field_1_25">
    <label for="input_1_25">20 Amps</label>
    <input type="number" tabindex="22" class="small" value="" step="any" id="input_1_25" name="input_25">
  </li>

  <li id="field_1_26">
    <label for="input_1_26" class="gfield_label">30 Amps</label>
    <input type="number" tabindex="23" class="small" value="" step="any" id="input_1_26" name="input_26">
  </li>

  <li id="field_1_27">
    <label for="input_1_27">40 Amps</label>
    <input type="number" tabindex="24" class="small" value="" step="any" id="input_1_27" name="input_27">
  </li>
</div>

<button onclick="FormQuote_Validator(gform_1)" type="button">Submit</button>
</form>

Below is the code for the FormQuote_Validator JavaScript function:

function FormQuote_Validator(Form){
  if ((Form.input_25.value == "") || (Form.input_26.value == "") || (Form.input_27.value == "")){
    alert("Please provide a value in Amps for all fields.");
    Form.input_1_25.focus();
    return false;
  }
}

The issue is that the FormQuote_Validator function currently returns "TRUE" even when one or two input fields have been submitted with numeric values. This behavior does not align with the desired validation logic. Help is needed to identify and correct any potential issues within the script. Any assistance would be greatly appreciated!

Answer №1

Since the symbol || represents OR, it implies that none of the inputs should be filled in.

Your code has been placed in a codepen, where I have observed the expected behavior.

If you desire the alert box to appear only when all inputs are left empty, you can make use of AND (&&).

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

Delivering HTML with Python Socket Server

I am currently learning about HTTP/CGI and exploring how to display HTML content on a webpage through the use of the socket library in Python. However, I am encountering some confusion regarding the correct syntax for this task: #!/usr/bin/env python impo ...

This error message occurs when trying to access JSON keys from an object with an invalid operand in the 'in' operation

Check out the fiddle I created here: http://jsfiddle.net/kc11/h6nh1gvw/2/ I'm attempting to extract keys from a JSON string using this code: var keys = $.map(a, function(element,key) { return key; }); . But unfortunately, I keep encountering the er ...

The focus behavior of React refs varies across different browsers such as Chrome, Firefox, and IE

While working with refs in react, I observed that the .focus() method behaves differently in Chrome and Firefox. https://i.stack.imgur.com/rjSsZ.png In this sandbox https://codesandbox.io/s/a-guide-to-react-refs-2nd-example-vl9sj?file=/src/Ref.js I have ...

spark of unique substance

Having trouble with cycle2 as all images are briefly displayed when the page loads. I tried the recommended solution http://jquery.malsup.com/cycle/faq.html but it didn't stop the flashing, indicating a different issue: The suggested fix for Cycle is ...

Encountering a 404 error when attempting to make an Axios post request

Utilizing Axios for fetching data from my backend endpoint has been resulting in a 404 error. Oddly enough, when I manually enter the URI provided in the error message into the browser, it connects successfully and returns an empty object as expected. Her ...

Assigning a new classification to the primary object in the evolving array of objects

I'm working with an element that loops through all the objects using v-for and has a CSS class named top-class{}... I need to dynamically add the top-class to the first object (object[0]) and update it based on changes, removing the old top-class in t ...

Exiting callback function in JavaScript

Is there a way to retrieve the return value from within a node.js/javascript callback function? function get_logs(){ User_Log.findOne({userId:req.user._id}, function(err, userlogs){ if(err) throw err; if(userlogs){ ...

When the window width increases, the image within a flexbox causes the flexbox to break

I'm currently working on designing a responsive splash page that covers most of the page (90vh). The layout includes a logo at the top and a simple paragraph at the bottom. I've experimented with using flex-shrink and flex-basis, but it's n ...

Utilizing HighCharts' Reflow Feature for Dynamic Chart Resizing

Our Angular application utilizes highcarts-ng for implementing HighCharts. Check out the Chart Maximize and Minimize function that is currently operational: function expandChartPanel() { vm.chartMaxed = !vm.chartMaxed; viewHeader = ScopeFactory. ...

When utilizing CKEditor in conjunction with ExpressJS, HTML tags may be displayed in the browser

Check out my app.js code below: <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0> <meta http-equiv="X-UA-Compatible" content="ie= ...

Reverse row changes in Angular Ag-Grid with the click of a button

Developed using Angular and JavaScript technologies. The AG-Grid consists of editable records with the first column being a checkbox. When changes are made to any selected records, clicking on a particular record's checkbox and then pressing a button ...

Valums file-uploader: Restricting file uploads based on user's credit score

Currently utilizing the amazing file uploader by Valums, which can be found at https://github.com/valums/file-uploader One feature I am looking to incorporate is a limit based on the user's account balance. The initial image upload is free, so users ...

Add an image to IFromFile in your ASP.NET Core MVC application

I'm looking to allow users to upload images, save them as IFormFile, and then store them in a database. Here's what I have so far: In the product controller, there is only an add action for both get and post methods, the product model, and the a ...

Achieve perfect alignment of an HTML table by positioning it precisely 36 pixels away from the right edge of the window

I'm struggling to achieve a table that is precisely 36px away from both the left and right edges of the browser window, regardless of CSS. While I can easily set the left margin, getting the exact right margin seems impossible as the `margin-right` CS ...

What is the best way to display a Nested JSON structure without an object key?

Need help with extracting data from two different JSON structures. The first one is straightforward, but the second is nested in multiple arrays. How can I access the content? See below for the code snippets: // First JSON { "allSuSa": [ { ...

How can I retrieve the word that comes after a specific word in discord.js

Currently, I'm attempting to create a bot similar to Dad bot, but I'm struggling with implementing the "Hi __ I'm, Dad" feature. Here's the code snippet that I've put together so far: var imWords = ["i'm", "I&a ...

The customer opts to store all images indefinitely into the data stream

I have set up a node server that captures images from a webcam at regular intervals and sends them to the client using the Delivery.js node module. Upon monitoring the browser resources in Chrome development tools, it appears that each image sent is being ...

Error encountered while using the Fetch API: SyntaxError - the JSON data contains an unexpected character at the beginning

I've been troubleshooting a contact form and there seems to be an error causing it to malfunction. It's strange because when I switch from Fetch to XMLHttpRequest, the code works fine. With Fetch, if I don't request a response, no errors ar ...

The custom error page in NextJS is failing to display

In my custom pages/404.ts file, I have coded the following: export default function NotFound() { return <h1>404 - Page Not Found</h1> } Additionally, there is another page that displays a 404 error when the organization is null: import Error ...

Why is it that the condition of being undefined or not functioning properly in state?

I am currently facing an issue with a piece of code I wrote in React JS. The state variable is not functioning as expected and even after modifying it upon button click, nothing seems to be working. After checking the console, I noticed that the state rema ...