Form Support in ASP.NET CORE TextArea Control

22 Mar 20247 minutes to read

The TextArea control 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.

CSHTML

<div class="control-section">
    <form id="myForm">
        <span>Please leave your comments</span>
        <br />
        <div class="control_wrapper TextArea-control-section">
            <ejs-textarea id='default' name="comments" 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>

Clear.cs

public ActionResult Form()
{
    return View();
}

Output be like the below.

Integration of ASP.NET CORE TextArea control with FormValidator component

TextArea control seamlessly integrates with the FormValidator component, allowing users to incorporate textarea inputs into form validation processes efficiently.

By integrating TextArea controls 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.

CSHTML

<div class="control-section">
    <div class="control_wrapper" id="control_wrapper">
        <h3 class="form-title">Feedback</h3>
        <div class="control_wrapper textarea-form">
            <form id="form1" method="post">
                <div class="form-group">
                    <div class="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 class="e-float-line"></span>
                    </div>
                    <div id="emailError"></div>
                </div>
                <div class="form-group">
                    <div>
                        <label>Comments</label>
                        <br/>
                        <div class="control_wrapper TextArea-control-section">
                            <ejs-textarea id="default" name="comments" data-msg-containerid="commentError" placeholder='Enter your comments' floatLabelType='Auto' required=""></ejs-textarea>
                        </div>
                    </div>
                    <div id="commentError"></div>
                </div>
                <div class="row">
                    <div style="float: left">
                        <button class="btn" type="submit">Submit</button>
                    </div>
                    <div style="float: left;">
                        <button class="btn" type="reset">Reset</button>
                    </div>
                </div>
            </form>
        </div>
        <br />
        <br />
    </div>
</div>

<script>
    // sets required property in the FormValidator rules collection
    var options = {
        rules: {
            'email': { required: [true, '* Please enter valid email'] },
            comments: { required: [true, '* Please enter your comments'] }
        },
    };
    // defines FormValidator to validate the TextArea
    var formObject = new ej.inputs.FormValidator('#form1', options);

    // places error label outside the TextArea using the customPlacement event of FormValidator

    formObject.customPlacement = function (element, errorElement) {
        document.querySelector("#default").parentNode.appendChild(errorElement);
    };
</script>

Clear.cs

public ActionResult FormValidator()
{
    return View();
}