How can I help you?
Form Support in React TextArea Component
21 Feb 202617 minutes to read
The TextArea component seamlessly integrates with HTML forms, enabling efficient submission of multiline text data. This integration allows users to provide detailed feedback, enter lengthy descriptions, or submit other multiline text content as part of form submissions.
// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render TextArea.
function App() {
return (
<div className='wrap'>
<br />
<TextAreaComponent id='default' name="myTextarea" placeholder='Enter your comments' floatLabelType='Auto' required = {true}></TextAreaComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render TextArea.
function App() {
return (
<div className='wrap'>
<br />
<TextAreaComponent id='default' name="myTextarea" placeholder='Enter your comments' floatLabelType='Auto' required = {true}></TextAreaComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));Integration of react TextArea component with FormValidator component
TextArea component seamlessly integrates with the FormValidator component, allowing users to incorporate textarea inputs into form validation processes efficiently.
By integrating TextArea components with the FormValidator component, users can enforce validation rules specific to text inputs, such as required fields, minimum and maximum length constraints, pattern matching, and more. This ensures that user-submitted text data meets specified criteria and maintains data integrity.
// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { useEffect } from 'react';
import * as React from 'react';
import * as ReactDom from 'react-dom';
let formObject;
// To render TextArea.
function App() {
useEffect(() => {
const options = {
// validation rules
rules: {
email: {
required: [true, '* Please enter valid email'],
},
comments: {
required: [true, '* Please enter your comments'],
}
},
};
// Initialize the form validator
formObject = new FormValidator('#form1', options);
}, []);
return (
<div>
<div className="control_wrapper" id="control_wrapper">
<h3 className="form-title">Feedback</h3>
<div className="control_wrapper textarea-form">
<form id="form1" method="post">
<div className="form-group">
<div className="e-float-input">
<label>Email</label>
<input type="email" id="email" name="Email" data-email-message="Please enter valid email address."
data-required-message="Required field" required data-msg-containerid="emailError"/>
<span className="e-float-line"></span>
</div>
<div id="emailError"></div>
</div>
<div className="form-group">
<div>
<label>Comments</label>
<TextAreaComponent id='default' name="myTextarea" data-msg-containerid="commentError" placeholder='Enter your comments' floatLabelType='Auto' required = {true}></TextAreaComponent>
</div>
<div id="commentError"></div>
</div>
<div className="row">
<div style=>
<button className="btn" type="submit">Submit</button>
</div>
<div style=>
<button className="btn" type="reset">Reset</button>
</div>
</div>
</form>
</div>
<br />
<br />
</div>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { useEffect } from 'react';
import * as React from 'react';
import * as ReactDom from 'react-dom';
let formObject;
// To render TextArea.
function App() {
useEffect(() => {
const options = {
// validation rules
rules: {
email: {
required: [true, '* Please enter valid email'],
},
comments: {
required: [true, '* Please enter your comments']
}
},
};
// Initialize the form validator
formObject = new FormValidator('#form1', options);
}, []);
return (
<div>
<div className="control_wrapper" id="control_wrapper">
<h3 className="form-title">Feedback</h3>
<div className="control_wrapper textarea-form">
<form id="form1" method="post">
<div className="form-group">
<div className="e-float-input">
<label>Email</label>
<input type="email" id="email" name="email" data-email-message="Please enter valid email address."
data-required-message="Required field" required data-msg-containerid="emailError"/>
<span className="e-float-line"></span>
</div>
<div id="emailError"></div>
</div>
<div className="form-group">
<div>
<label>Comments</label>
<TextAreaComponent id='default' name="comments" data-msg-containerid="commentError" placeholder='Enter your comments' floatLabelType='Auto' required = {true}></TextAreaComponent>
</div>
<div id="commentError"></div>
</div>
<div className="row">
<div style=>
<button className="btn" type="submit">Submit</button>
</div>
<div style=>
<button className="btn" type="reset">Reset</button>
</div>
</div>
</form>
</div>
<br />
<br />
</div>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));