Form Support in Vue TextArea Component

11 Jun 202413 minutes to read

The TextArea component seamlessly integrates with HTML forms, enabling efficient submission of longer text data. By including TextArea inputs within HTML forms, users can conveniently input multiline text content and submit it as part of form submissions.

This integration enhances the usability of forms, allowing users to provide detailed feedback, enter lengthy descriptions, or input other multiline text data seamlessly.

<template>
  <div class='wrap'>
    <form id="myForm">
      <span>Please leave your comments</span>
      <br />
      <div id='input-container'>
        <ejs-textarea id='default' name="myTextarea" placeholder='Enter your comments' floatLabelType='Auto'
          required=""></ejs-textarea>
      </div>
      <input id="submit" type="submit" value="Submit">
      <input id="reset" type="reset" value="Reset">
    </form>
  </div>
</template>
<script setup>

import { TextAreaComponent as EjsTextarea } from '@syncfusion/ej2-vue-inputs';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}
</style>
<template>
  <div class='wrap'>
    <form id="myForm">
      <span>Please leave your comments</span>
      <br />
      <div id='input-container'>
        <ejs-textarea id='default' name="myTextarea" placeholder='Enter your comments' floatLabelType='Auto'
          required=""></ejs-textarea>
      </div>
      <input id="submit" type="submit" value="Submit">
      <input id="reset" type="reset" value="Reset">
    </form>
  </div>
</template>
<script>
import { TextAreaComponent } from '@syncfusion/ej2-vue-inputs';

export default {
  name: "App",
  components: {
    "ejs-textarea": TextAreaComponent
  },
  data: function () {
    return {}
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}
</style>

Integration of Vue 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.

<template>
  <div class='wrap'>
    <div className="control_wrapper" id="control_wrapper">
      <h3 className="form-title">Feedback</h3>
      <div className="control_wrapper textarea-form">
        <form id="form-element" 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>
              <ejs-textarea id='default' name="comments" data-msg-containerid="commentError"
                placeholder='Enter your comments' floatLabelType='Auto' required=""></ejs-textarea>
            </div>
            <div id="commentError"></div>
          </div>
          <div className="row">
            <div style="float: left;">
              <button className="btn" type="submit">Submit</button>
            </div>
            <div style="float: left;">
              <button className="btn" type="reset">Reset</button>
            </div>
          </div>
        </form>
      </div>
      <br />
      <br />
    </div>
  </div>
</template>
<script setup>
import { TextAreaComponent as EjsTextarea } from '@syncfusion/ej2-vue-inputs';
import { FormValidator } from "@syncfusion/ej2-vue-inputs";
import { onMounted } from 'vue';

onMounted(() => {
  var options = {
    rules: {
      email: {
        required: [true, '* Please enter valid email'],
      },
      comments: {
        required: [true, '* Please enter your comments'],
      }
    },
    customPlacement: function (element, errorElement) {
      document.querySelector(".error-element").appendChild(errorElement);
    },
  };
  // defines FormValidator to validate the TextArea
  new FormValidator("#form-element", options);
});

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}
</style>
<template>
  <div class='wrap'>
    <div className="control_wrapper" id="control_wrapper">
      <h3 className="form-title">Feedback</h3>
      <div className="control_wrapper textarea-form">
        <form id="form-element" 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>
              <ejs-textarea id='default' name="comments" data-msg-containerid="commentError"
                placeholder='Enter your comments' floatLabelType='Auto' required=""></ejs-textarea>
            </div>
            <div id="commentError"></div>
          </div>
          <div className="row">
            <div style="float: left;">
              <button className="btn" type="submit">Submit</button>
            </div>
            <div style="float: left;">
              <button className="btn" type="reset">Reset</button>
            </div>
          </div>
        </form>
      </div>
      <br />
      <br />
    </div>
  </div>
</template>
<script>
import { TextAreaComponent } from '@syncfusion/ej2-vue-inputs';
import { FormValidator } from "@syncfusion/ej2-vue-inputs";

export default {
  name: "App",
  components: {
    "ejs-textarea": TextAreaComponent
  },
  data: function () {
    return {}
  },
  mounted() {
    var options = {
      rules: {
        email: {
          required: [true, '* Please enter valid email'],
        },
        comments: {
          required: [true, '* Please enter your comments'],
        }
      },
      customPlacement: function (element, errorElement) {
        document.querySelector(".error-element").appendChild(errorElement);
      },
    };
    // defines FormValidator to validate the TextArea
    new FormValidator("#form-element", options);
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}
</style>