Problem with validator

[assemblerParticipant]

I have a form with two simple text inputs. I’ve placed a validator like this:

<JqxValidator ref={this.validatorRefBuilder} position={'bottom'} hintType={'label'} 
              rules={[
        {
          input: '.descInput',
          message: 'Desc Required',
          action: 'blur',
          rule: 'required'
        },
        {
          input: '.abInput',
          message: 'AB Required',
          action: 'blur',
          rule: 'required'
        }
      ]}>
    <form id='form' action='./'>
    ...
    </form>
</JqxValidator>

The problem is every time I load the form it shows me the error on Desc. The Desc field has the focus() in the componentDidMount. If I remove the focus method from it, then the validator works as expected. Is this an issue or am I missing something here?

Best Regards!

[Ivo ZhulevParticipant]

Hi assembler,

I made an example in which when the page is loaded it focuses the first input, but not showing the error(the error shows when I lose the focus of the input, as expected). Check it out and see if it works the same for you.
Here’s the code:

class App extends React.Component {
    componentDidMount() {
        document.querySelector('.descInput').focus();
    }

    render() {
        return (
            <JqxValidator ref={this.validatorRefBuilder} position={'bottom'} hintType={'label'}
                rules={[
                    {
                        input: '.descInput',
                        message: 'Desc Required',
                        action: 'blur',
                        rule: 'required'
                    },
                    {
                        input: '.abInput',
                        message: 'AB Required',
                        action: 'blur',
                        rule: 'required'
                    }
                ]}>
                <form id='form' action='./'>
                    <input className='descInput' />
                    <input className='abInput' />
                </form>
            </JqxValidator>
        );
    }
}

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[assemblerParticipant]

Mr. Ivo Zhulev,
Thanks for your response. Try your solution with JqxInput instead of input. Isn’t the same.
Cheers.

[assemblerParticipant]

Mr. Ivo Zhulev,
I just found a solution for this. I’m calling myJqxInput.focus() wrapped into a setTimeout function passing it 100 milliseconds. I guess React is taking some time to load other things in the background.
Best regards.

[Author]

Posts