[Bug] No "required" in search input

[SisiVero]

Problem

For one to search there must be a value.

Therefore, the "required" feature should be added to the input tag for search query. That way, when a user clicks on the search button without inputting a value in the input field, he or she will be prompted to fill the input field first.

Implementation

• [x] I would be interested in implementing this feature.

[possumbilities]

I'm going to move this to status: discussion.

Is there value is leaving it empty and letting someone search with an empty value to get "all results" on the end-result-page?

[TimidRobot]

It already prompts when there is no input:

Our default source is Openverse which won't execute a query without input, so I think input should be required.

Is the current implementation ideal? Are we using JavaScript where HTML would be better?

[SisiVero]

Hi @possumbilities , I'm sorry I didn't get your question.

Hi @TimidRobot, currently the pop up or alert is written as "windows.alert" in the function. I'm guessing this with reference to the way the pop up appears.

Now, what if a user is making use of mobile, there definitely won't be a pop up when he o she clicks on the button without filling a value. Yes?

Now, an attribute of a great codebase is making it DRY. The function for the alert pop up can be replaced with just the text "required" in the input tag. This will work for both desktop and mobile.

Good UX

[possumbilities]

I would agree that avoiding a popup here would be better UX, and having some kind of warning within in the content itself attached to the input area.

Since the button action is controlled by JavaScript it should be reasonable to disable that behavior if there is no value.

[Immy-delish]

Hello @possumbilities , @SisiVero and @TimidRobot I this this is a great issue because since the search is opened in Openverse in a new tab, meaning if there is no input, a user should be notified when they click on the search button. I think leaving the search button open is a better option because it talks better to the user that there is an action awaiting rather that leaving it inactive unless they enter an input. So I think we should use Javascript to implement the required feature by leaving the button open but then notifying the user that "required" if they try to access search without an input.

[SisiVero]

Hi @Immy-delish , the search button cannot be inactive. And having a function for a search button seems too much when required can just be added to the search input and will work for both mobile and desktop screens.

[Immy-delish]

@SisiVero , I also agree, the search button should always be open not disabled if there is no input. But if The User clicks on the Search Button with no input, They should be notified in the input field that "Required". I guess this would require Javascript. If we all agree to this, We could implement it this way.

[Immy-delish]

I would agree that avoiding a popup here would be better UX, and having some kind of warning within in the content itself attached to the input area.

Since the button action is controlled by JavaScript it should be reasonable to disable that behavior if there is no value.

If we are disabling the Search button, Then the input field should have "Required" as a placeholder and enable the button immediately after inputting text.

[SisiVero]

hi @Immy-delish , no. For "required" to be added to the input field, no javascript function needs to be written or implemented.

[Immy-delish]

hi @Immy-delish , no. For "required" to be added to the input field, no javascript function needs to be written or implemented.

If We shall have it there by default, then the search button must be disabled by default. May I Know how this would be implemented please. I guess we wont avoid Javascript.

[SisiVero]

@possumbilities understands and will move the issue accordingly when @TimidRobot responds.

[possumbilities]

I still hold that this is the best way forward and work here should head this direction:

I would agree that avoiding a popup here would be better UX, and having some kind of warning within in the content itself attached to the input area.

Since the button action is controlled by JavaScript it should be reasonable to disable that behavior if there is no value.