Is it possible to conceal the search button when there is an invalid entry in any field?

I have a task to hide the search button if any field has a type other than Number. Here is what I implemented in Computed:

filterValid () {
return (
(this.tkType !== null) && (typeof this.tkType.value === 'number') ||
(this.archiveTk !== null) && (typeof this.archiveTk.value === 'number') ||
(this.fundTk !== null) && (typeof this.fundTk.value === 'number') ||
(this.tkStatusSend !== null) && (typeof this.tkStatusSend.value === 'number') ||
(this.tkTypeMessage !== null) && (typeof this.tkTypeMessage.value === 'number')
)
}
<v-btn
  :disabled="!filterValid"
>
Search
</v-btn>

While this solution works for one select, it doesn't hide the button if the second select is invalid. Is there a way to achieve my validation using only boolean operators?

Answer №1

I couldn't find a return statement in the computed function filterValid. If you want the condition "

at least one field that has a type other than: Number
" to work, you should use && instead of ||:

filterValid () {
  return (this.tkType !== null) && (typeof this.tkType.value === 'number') &&
    (this.archiveTk !== null) && (typeof this.archiveTk.value === 'number') &&
    (this.fundTk !== null) && (typeof this.fundTk.value === 'number') &&
    (this.tkStatusSend !== null) && (typeof this.tkStatusSend.value === 'number') &&
    (this.tkTypeMessage !== null) && (typeof this.tkTypeMessage.value === 'number')
}

You also mentioned to hide the search button, but instead of linking filterValid to disabled, you should link it to v-show

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

Using Selenium to continuously scroll to the bottom of the webpage

Selenium: I am new to WebDriverJS. I have experimented with this method in Java. Long repeat = 0l, scrollHeight = 0l, returnHeight = 0l; while(true){ if (repeat == 0) { returnHeight = (Long) jse.executeScript("var scroll =document.documentEle ...

Script for Grunt build that analyzes an XML document to identify the files that need to be duplicated

copy: { build: { cwd: 'app', src: ['**', '!**/vendors/**', '!**src/js/*.js',], dest: 'dist', expand: true } } When utilizing Grunt build scripts to create a distribution folder for the ...

Is it possible to open a document hyperlink from one jQuery tab in a different jQuery tab?

Unfortunately, despite my efforts to search and experiment, I have not been able to find a solution for my specific issue within the FAQ. My goal is to display Apache Solr results in the "Search" tab (which has already been achieved and is working as expe ...

Displaying Text and Images on a Sliding Carousel with a Static Background Image

I am currently experimenting with the Materializecss Image Slider. My goal is to have a fixed full-screen background image while the texts and images slide over it. Initially, I tried setting the background-color of the slider class as transparent, but un ...

Retrieve the div element from the webpage

I've scoured the internet in search of a suitable technique, but unfortunately, I haven't had much luck. Essentially, I am interested in using JavaScript or jQuery (potentially with Ajax) to extract a specific word from a div on a page within my ...

Triggering an event upon selecting a dropdown option

I'm currently working on a form that includes a dropdown menu. My goal is to display specific keywords for each trip when selected from the menu (preferably below the input field, as shown in the code snippet below). .show has been set to display:non ...

Extracting Hidden Links: Retrieve the URL that is exclusively visible on the webpage, but not in the source code

While browsing a website, I came across a link that I want to access. However, the link is displayed on the website but is not visible in the HTML file. There is a copy button that allows the link to be copied to the clipboard. I am wondering if anyone k ...

How can express.js be properly installed using typescript?

Currently, I am in the process of setting up a new project that involves using express.js with typescript integration. Would it suffice to just install @types/express by running the following command: npm install @types/express Alternatively, do I also ...

How to access a class from another JavaScript file using a function call

The title may seem strange, but I will do my best to explain the situation clearly. I have a website with a navigation bar where each tab corresponds to a different php file. All the files share a common js and css file. The directory structure is as foll ...

Getting the percentage of code coverage in Selenium tests in relation to the web application code

I need to track the code coverage of my selenium tests in relation to the source code of the server (web application source code) that they cover. For instance, I want the tests for the login feature to measure how much of the web application's code ...

Tips for refreshing jQuery to ensure it functions smoothly for subsequent tasks

I am facing an issue with running a second process under JQuery, as shown in the code snippet below: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <script type=" ...

Utilizing AngularJS to Extract JSON Data from Gzipped Files Stored Locally via Ajax

Currently, I am attempting to retrieve and read a JSON file that is stored in data.gz using AngularJS's $http service. However, when I make the request, all I get back are strange symbols and characters as the response. My application is being run loc ...

Using axios to make a request to a REST API

I recently developed a Rest API using express to interact with mongodb. Testing it with postman has been successful so far. However, when I attempted to integrate the api with a basic web app created in vue and used axios to get a response from the api, ...

Setting a specific time for a div element with opacity: A step-by-step guide

Is there a way to adjust the timing for the appearance of the add-to-cart when hovering over the product-list-item? Currently, it appears when I hover over the item and disappears when I move my mouse away. .product-list-item { position: relative; w ...

What is the process for retrieving the data that is transferred to Jade during compilation?

In my Gruntfile.js, I have included the code where I am passing a JSON file to Jade. Here is a snippet of the code: compile: { files: { // some files }, options: { pretty: true, ...

Special character Unicode regex for names

After spending the entire day reading about regex, I am still struggling to fully grasp it. My goal is to validate a name, but the regex functions I have found online only include [a-zA-Z], omitting characters that I need to allow. Essentially, I require ...

I am currently developing a program that is displaying a blank page despite my efforts to write

I've been trying to write the code below but it only shows a blank page. var greeting = React.createClass({ render: function() { return ( <div> <h1>Hello</h1> </div> ...

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below: const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', } ...

Troubleshooting problems with callback functionality in conjunction with Expressjs, JWT authentication, and Angular

For my current project, I am implementing authentication using JWT with Expressjs and Angularjs. However, I now need to integrate node-dbox to access Dropbox files of my users. The issue arises when trying to store the token received from Dropbox for user ...

How to include a for loop within an array as an element

Below is an illustration of the data available: $scope.allmovies[ {title:"Harry Potter", time:130}, {title:"Star Wars", time:155}, {title:"Lord of the Rings", time:250}, {title:"Goonies", time:125}, {title:"Fast and Furious", time:140} ]; var mostpopular ...