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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

TextBoxComponent validation

Thread ID:

Created:

Updated:

Platform:

Replies:

142589 Feb 11,2019 02:23 PM UTC Feb 13,2019 04:39 AM UTC React - EJ 2 3
loading
Tags: Textbox
Kéki Richárd
Asked On February 11, 2019 02:23 PM UTC

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 [Syncfusion]
Replied On 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 


Kéki Richárd
Replied On 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

Prince Oliver [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon