you can add a minlength attribute to your input element. Keep in mind, that this is just a browser validation

still the same

can you share the code how you set up your form?

how do you submit your form?

by pressing Enter

isn't there a way to keep it server component ?

yes, you can handle the empty input also serverside. Get the searchparams and validate it:

export default function Page({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
 }) {
  if(searchParams.q.length <= 0)
    return <p>Your input can't be empty</p>
  else
    return <h1>My Page</h1>
}

Add "required" attribute to your input

It's not the best solution to me

Why not?

It wouldn't work either like OP expected

i don't need this

@Tomistoma what do you think about the things that we talked about?

not the best solution too

what kind of solution do you expect?

the search params will still be ?q= if i do this

that's correct

i don't even need it to update search params

ok, when you press 'enter' the browser redirects to the entered action. So you need to do something before the action. Do you agree?

i need it to ckeck if there is value then update it

else, do not update

browser does not redirect me

it's just search params

doesn't affect on the current page

it does.

Pressing enter (onKeyup or onKeydown event)
Browser Look for Form action
Browser sets the names of the input as searchparams to the specified action path

in my case, it doesn't

it still the samd page /bank

how do you think the browser redirects you right now?

If you want to use the Form component but don't want it to submit when the input is empty, you need to add "required" to the input, as it is a native way of preventing an HTML form from getting submitted.

Otherwise (if you don't want a native validation popup), you might want to create your own form as a client component, check the state of the input in onSubmit, and do router.push() only when the input value is not empty

the browser isn't redirecting me in this case

remove the "required"

Yeah i will go with that

that's what happen on pressing enter

I told him that too ( https://nextjs-forum.com/post/1318332105226457181#message-1318338731077275700 ), but it looks like he don't want to do that ( https://nextjs-forum.com/post/1318332105226457181#message-1318551974949683262 )

see: redirected.

From: /bank/
To: /banks?q=

I thought there is a possible way to keep my component on server side

but because there isn't a way to keep that, i will go with client component

i hope they will fix it

and not to submit the form if there is no value.

happy to help