Swagger: How to make "Execute" button disabled if required parameters haven't been informed

Question

I am using Swagger UI Express to create docs to a very simple node API. It's more a "UI/UX" question, but is bothering me.

I have routes where a path parameter is required (client id, for instance), and I have documented this way. So, the parameter on Swagger UI is marked as required. However, user is able to click on "Execute" button without filling in the required parameter. This would not be a big problem if the page returned an error and let the user fill the required parameter and try again, but is not what it is happening. After clicking the button, a loading gif appears and keeps loading... Even if the user click on "Cancel" button, it is not stopping from loading.

On console, the follow error appears:

react_devtools_backend.js:4026 Error: Required parameter codCliente is not provided
    at index.js:233:13
    at Array.forEach (<anonymous>)
    at Object.Bn [as buildRequest] (index.js:200:22)
    at actions.js:452:24
    at Object.dispatch (utils.js:177:16)
    at dispatch (<anonymous>:3665:80)
    at redux.js:546:12
    at wrap-actions.js:33:10
    at Object.r (system.js:175:26)
    at Object.executeRequest (system.js:487:14)

Here is a screenshot of problem happening. We can see the parameter as required but the UI let you click on "Try it out" and then click on "Execute".

Here is an example of router and controller code:

const getByCod = async (req: Request, res: Response): Promise<Response> => {
  const { codCliente } = req.params;
  const cliente = await clientesService.getByCod(parseInt(codCliente, 10));

  return res.status(StatusCodes.OK).json({ data: cliente });
};

clientesRouter.get(
  'clientes/:codCliente',
  authenticationMiddleware,
  authorizationMiddleware,
  getByCod,
);

And here my swagger path definition inside swagger.json:

"/clientes/{codCliente}": {
      "get": {
        "summary": '...',
        "description": '...',
        "tags": ["Clientes"],
        "security": [...],
        "parameters": [
          { 
            "in": "path",
            "name": "codCliente",
            "description": "Código do cliente",
            "required": true,
            "type": "integer"
          }
        ],
        "responses": {
          [...]         
        }
      }
    },

Answer 1

In OpenAPI 3.x, the parameter type must be wrapped into the schema keyword. The missing schema is what causes the issue with Swagger UI.

        "parameters": [
          { 
            "in": "path",
            "name": "codCliente",
            "description": "Código do cliente",
            "required": true,
            "schema": {            <-----------
              "type": "integer"
            }
          }
        ],

The syntax without schema (as in your original example) is used in the previous version of the spec, OpenAPI 2.0 (swagger: '2.0').

You can check your OpenAPI definitions for syntax errors using https://editor.swagger.io or other validators.