TextBoxComponent validation

[Kéki Richárd]

Hi,

I started to use TextBoxComponent, but I don't know how can I validate it. No validationRules property, and when I tried to validate with FormValidator, I get an error.

I tried this:

this.validatorOptions = {

  rules: {

    'email': { required: true, email: true }

  }

}

this.validator = new FormValidator('#sign-up-form', this.validatorOptions)

this.handleSubmit = (event) => {

  event.preventDefault();

  this.validator.validate()

}

And the error that I got: 

TypeError: Cannot read property 'querySelector' of null

select

.../node_modules/@syncfusion/ej2-base/src/dom.js:204

Thank you for any help you provide,

Regards,

Richard

[Prince Oliver]

Hi Richard, 

Thank you for contacting Syncfusion support. 

We have checked your reported scenario in our end, but unfortunately the reported issue is not reproduced in our end. We suspect that the issue might have raised due to appending the error message to the null element. If you need to place the custom error message for email textbox, then we suggest you use the customPlacement method in the form validator. Kindly refer to the following code snippet. 

this.formValidator = { 

    // Defines the validation rules 

    rules: { 

        'name': { 

            required: [true, '* Enter your name'] 

        }, 

        'email': { required: true, email: true } 

        //'email': { required: [true, "* Enter your email address"], email: [true, '* Enter valid Email'] } custom error message 

    } 

}; 

this.formObject = new FormValidator('#formTemp', this.formValidator); 

this.formObject.customPlacement = function (element, errorElement) { 

    element.parentNode.parentNode.appendChild(errorElement); 

}; 

 

onSubmitClick(event) { 

    event.preventDefault(); 

    this.formObject.validate(); 

} 

We have attached a sample for your reference, please find the sample at the following location https://stackblitz.com/edit/react-gqxwv3  

Kindly check the above solution and if you still face any issue, kindly share us the sufficient information on the issue to replicate it in our end. This will help us provide a prompt solution at the earliest.  

Regards, 

Prince 

[Kéki Richárd]

Hi,

Thank you for quick and detailed answer. I made a mistake. I created FormValidator instance in constructor and not in componentDidMount (after render).

Sorry.

Thank you again,

Regards,

Richard

[Prince Oliver]

Hi Richard, 

Thank you for your update. We are glad that the issue is resolved in your end. Please let us know if you need any further assistance on this. 

Regards, 

Prince