1. Home
  2. Forum
  3. React - EJ 2
  4. FormValidator Components (DropdownList, TextField and DatePicker)

FormValidator Components (DropdownList, TextField and DatePicker)

Hi expert,

I am wondering if it is possible for me to add more than 1 attribute on cssClass e.g. cssClass={e-small e-error}. Generally it works with only 1 attribute like cssClass={e-small} OR cssClass={e-error} but it cannot have both attributes together. Any advice? Refer to Screenshot 1

However, I read the website from Syncfusion about Validator - https://ej2.syncfusion.com/javascript/documentation/form-validator/ but I don't see any example source codes related to Screenshot 2. Oh yes I am using React so is there any tutorial on Validator? Is there any example for submit validation? I would like to have these fields displayed in error rectangle with error message. Also applies to DatePicker, DropdownList and TextField.

Do let me know if there is another alternative solution to work with FormValidator on a certain component (DropdownList, TextField and DatePicker)?

Thanks expert.

Screenshot 1



Screenshot 2



5 Replies
CI Christopher Issac Sunder K Syncfusion Team October 22, 2018 12:12 PM UTC

Hi DeBao Chua, 

Thank you for contacting Syncfusion support. 

Here are details about the components DropdownList, TextField and DatePicker for your queries, 

Components 
Reply for Multiple class names in CssClass &  Validation using FormValidator 
DropDownList 
Multiple CssClass supported. Here is the sample with FormValidator, 
TextBox  
From the release version 16.3.25 onwards cssClass property accepts the multiple classes. Sample prepared along with Validation, 
DatePicker 
Multiple CssClass supported. Here is the sample with FormValidator, 

Regarding the documentation you have asked, We have logged this as a documentation improvement for Form Validation using React controls. This will be included in any of our upcoming releases. We have created a form validation sample in React, 
  
step1: 
Need to import Form Validator control 
  
import { FormValidator, FormValidatorModel } from'@syncfusion/ej2-inputs' 
  
step2: 
Need to import button control 
import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; 
  
  
step3: 
Then initialize button component and form validator in componentDidMount() 
componentDidMount() { 
  
    // Initialize the Submit Button. 
    var buttonFormValidate = new ButtonComponent({ 
      isPrimary: true 
    }); 
    buttonFormValidate.appendTo('#validateSubmit'); 
    var buttonReset = new ButtonComponent({}); 
    buttonReset.appendTo('#resetbtn'); 
  
    // Initialize the FormValidator. 
    var formObj = new FormValidator('#formId', options); 
    document.getElementById('formId').addEventListener("submit", function (e) { 
      e.preventDefault(); 
      if (formObj.validate()) { 
        alert('Customer details added!'); 
        formObj.reset(); 
      } 
    });  
  }  
  
step 4: 
Add validation rules: 
  
    var options = { 
      rules: { 
        User: { required: true }, 
        Email: { email: [true, 'Enter valid Email'] }, 
        DOB: { date: [true, 'Enter valid format'] }, 
        City: { required: true } 
      } 
    }; 
}; 
Step 5: 
Then create HTML content inside the render() method. 
  
render() { 
    return ( 
      <div class="col-lg-12 control-section"> 
<input type="text" id="mail" name="Email" required data-msg-containerid="mError" /> 
      </div>); 
  } 
} 
  

Please let us know if you need any further assistance. 

Thanks, 
Christo

DC DeBao Chua October 22, 2018 12:41 PM UTC

Hi Christopher,

I check the source codes and test the output. Yes, it is what I am looking for. Looks great but I will test it on my side soon. However I need to ask you about the source codes because I really don't understand so could you kindly explain to me about the screenshot below?





I really don't understand about class1 class2 class3. There is no linked relationship. If so, where? If not, why do you include it for?

Btw, I am using typescript with react (tsx) instead of JavaScript. It would be great if you could re-send me the source codes that is compatible with TypeScript because I tried to implement the codes below but it does not work.

componentDidMount() {
this.formValidator = {
// Defines the validation rules
rules: {
'date': {
required: [true, 'Enter your date']
},
}
};
this.formObject = new FormValidator('#formTemp', this.formValidator); <--- this.formValidator comes from where??
}

CI Christopher Issac Sunder K Syncfusion Team October 24, 2018 05:31 PM UTC

Hi DeBao Chua, 

Thanks for the update.  

As per your concern, we have added respective styles for the classes and provided the sample along with Form Validator. The samples are prepared in Typescript with React as you requested.  

Component sample with multiple classes and Form Validator 
Did it support multiple class in CssClass property? 
Yes. 
Yes. 
No. We can customize it using addClass method 
 

Note:  
  1. We have provided explanations as comments for the needed codes.
  2. Appropriate styles of the classes are properly referenced in the sample.

Please get back to us if the provided solution is not helping you still. 

Thanks, 
Christo 


DC DeBao Chua October 25, 2018 08:23 AM UTC

Hi Christo,

Thanks for your explaination and solution.

Unfortunately, it does not work on my side.

Error:
Uncaught TypeError: Cannot read property 'inputWrapper' of undefined
Uncaught TypeError: Cannot read property 'classList' of undefined

Well, I was passing DropdownListComponent and DatePickerComponent to Field Component where it comes from react-final-form library. See the sample code below

               <Col xl={4}>
<Field name={fields.Status.listDataField} validate={helloRequired} required={true} validateFields={[]}>
{(args: any) => (
<DropDownListField
placeholder={`${fields.Status.label} *`}
dataSource={mapToKeyValue(fields.Status.choices)}
fields={dropdownFields}
{...args}
/>
)}
</Field>
</Col>

As you can see Field is inside DropdownlistComponent. Anyway I am using validate attribute property where it will check validate.

Another question - I would like to know how I can implement props.meta.touched into this method. The purpose of using this method is to check if the user has touched a field and if the user didn't select anything, it will display error with red rectangle AND label message like "It is mandatory field".

Based on the source codes, the dropdownlist seems not to be working - the label is placed inside the field. AND when I touch this field and try to leave it, it does not do nothing but when I click submit button, it shows error BUT no red color. Just a black???!!! I find it strange.

Please check it and I hope there is a solution on syncfusion for React-Typescript. Thank you expert.

PO Prince Oliver Syncfusion Team October 30, 2018 05:14 PM UTC

Hi DeBao, 

Thank you for your update. 

We have looked into your requirement. Currently, EJ2 controls have no in-built support to use validation classes as touched, dirty, etc. in react final form. We have logged this request as a feature in our end and it will be included with Volume 4, 2018 build release. We appreciate your patience, until then. 

Please, let us know if you need any further assistance. 

Regards, 
Prince 


Loader.
Up arrow icon