Validator not working in react-querybuilder

Question

I am using react-querybuilder. field validation is not working. See this StackBlitz when you click on Rule and check all field there is no error on that.

export const fields = (
    {
      name: 'lastName',
      label: 'Last Name',
      placeholder: 'Enter last name',
      validator: (r: RuleType) => !!r.value,
    },
    {
      name: 'view',
      label: 'Unique views',
      inputType: 'number',
      operators: [
        { name: '=', label: '=' },
        { name: '<', label: 'less than' },
        { name: '>', label: 'more than' },
        { name: 'between', label: 'in between' },
      ],
      validator: (r: RuleType) => r.value > 0,
    },
  ] satisfies Field[]
).map(toFullOption);

This is my QueryBuilder component

import 'react-querybuilder/dist/query-builder.scss'
import './styles.scss'

import { QueryBuilderAntD } from '@react-querybuilder/antd'
import { useState } from 'react'
import type { RuleGroupType } from 'react-querybuilder'
import { QueryBuilder, defaultValidator, formatQuery } from 'react-querybuilder'

import { fields } from './fields'

const initialQuery: RuleGroupType = { combinator: 'and', rules: [] };

export const SegmentGroupQueryBuilder = () => {
  const [query, setQuery] = useState(initialQuery);

  
  console.log(query)
  return (
    <>
    <QueryBuilderAntD>
      <QueryBuilder
        fields={fields}
        query={query}
        onQueryChange={setQuery}
        validator={defaultValidator}
        controlClassnames={{ queryBuilder: 'queryBuilder-branches' }}
      />
    </QueryBuilderAntD>
    <pre>{formatQuery(query, {
            format: 'sql'
          })
    }</pre>
  </>
  );
  
}

I am using antd/querybuilder packages: 7.2.0. However, it is working here don't know what is issue. I tried in different project as well. What could be the possible issue? Its not showing any error on UI or color, even rendered input html is not having invalid error class as mentioned in docs.

Jake Boone · Accepted Answer · 2024-04-18 06:25:14Z

4

Maintainer of react-querybuilder here. Your code seems to be working, but you won't see any visual evidence of that without styles based on the queryBuilder-invalid class.

I've copied your stackblitz code into this CodeSandbox and applied the following CSS:

.queryBuilder-invalid {
  border: 2px solid red;
}

The initial query, shown below, demonstrates valid/invalid states of the various fields, the invalid states outlined in red.

const initialQuery: RuleGroupType = {
  combinator: 'and',
  rules: [
    { field: 'firstName', operator: 'beginsWith', value: 'Stev' },
    { field: 'firstName', operator: '=', value: '' },
    { combinator: 'and', rules: [] },
    {
      field: 'uniqueArticleViews',
      operator: '=',
      valueSource: 'value',
      value: 3,
    },
    {
      field: 'uniqueArticleViews',
      operator: '=',
      valueSource: 'value',
      value: 0,
    },
    {
      field: 'alsoPlays',
      operator: 'in',
      valueSource: 'value',
      value: 'ZB,TH',
    },
    { field: 'alsoPlays', operator: 'in', valueSource: 'value', value: '' },
  ],
};

The queryBuilder-invalid class has been added to the empty group based on the logic of defaultValidator. Invalid rules are based on their respective fields' validators.

answered Apr 18, 2024 at 6:25

Jake Boone

1,5002 gold badges14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Muhammad Zahid Iqbal Over a year ago

Thanks Jake, Glad to meet you!! It worked. How I am supposed to know when submitting this information to API that these fields are invalid like 'FirstName,' Also plays' so that we can prompt either user should fill those or remove those.

Jake Boone Over a year ago

You'd need to evaluate the query outside the render process, but you could use the same validation functions. If you wanted to store the validation result in the query object itself, you might want to use transformQuery with a ruleProcessor that adds the result to each rule. I'd probably recommend doing any extra-render validation on the server side. Assume the UI can help the user enough, but don't trust anything coming through an API call.

Muhammad Zahid Iqbal Over a year ago

Hi @Jake Boone, Can you please answer this question as well. I will be grateful to you.

Jake Boone Over a year ago

Hi @MuhammadZahidIqbal, it may be bad form on this site to ask, but could you select this and the other you linked to as answers? I’m not really asking for the points but just to confirm for me and any other visitors that my responses addressed your questions.

Collectives™ on Stack Overflow

Validator not working in react-querybuilder

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related