We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

TextBoxComponent validation

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

3 Replies

PO Prince Oliver Syncfusion Team February 12, 2019 12:35 PM UTC

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 



KR Kéki Richárd February 12, 2019 06:23 PM UTC

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


PO Prince Oliver Syncfusion Team February 13, 2019 04:39 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon