How to create a multiline input textbox

[dsapo]

Hi Support:

What Syncfusion may I use for a multiline input editor.

Thanks in advanced.

David

[Karthik Ravichandran]

Hi David, 

 

Thanks for contacting Syncfusion support. 

 

We have checked your query (How to create a multiline input textbox). Currently we don’t have a separate TextArea component. You can achieve your requirement in application level by using “.e-textarea” class. It will change the Html TextArea component to the EJ appearances. Please refer the below code block. 

 

<textarea id="text" class="e-textarea"></textarea> 

 

For your convenience, we have attached the sample in the below link. 

 

Sample 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R 

[dsapo]

Hi Karthik:

Thanks for your answer, but could do I add something similar to this for the textarea:

validation-rules='new Dictionary<string, object>() { { "required",true} }'

validation-message='new Dictionary<string, object>() { { "required","Required!"} }'

My intention is to make the textarea a required field, so when the user forgets to fill it to display the red message "Required!"

Thanks again

David

[Karthik Ravichandran]

Hi David, 

 

Thanks for your update. 

 

You can achieve your requirement by using the jQuery validation. Please refer the below code block. 

 

[html] 

<form id="myform" name="messageForm"> 

        <div class="control"> 

            <textarea id="textarea" class="e-textarea" name="text"></textarea> 

        </div> 

        <div class="control"> 

            <input type="submit" value="Submit" id="submit" /> 

        </div> 

</form> 

 

[script] 

 

$("[name='messageForm']").validate({ 

    rules: { 

        text: { 

            required: true, 

            minlength: 8 

        } 

    }, 

    messages: { 

        text: { 

            required: "Enter the value" 

        } 

    } 

}); 

 

$.validator.setDefaults({ 

    //to validate all fields(hidden also) 

    ignore: [], 

    //if we don’t set custom class, default “error” class will be added 

    errorClass: 'e-validation-error', 

    //it specifies the error message display position 

    errorPlacement: function (error, element) { 

        $(error).insertAfter(element.closest(".e-textarea")); 

    } 

}); 

 

Note:  To achieve the validation, you should refer the jquery.validate.min.js file in your project. 

 

For your convenience, we have attached the sample in the below link. 

 

Sample 

 

To know more details about jQuery validation, please refer the below documentation link:
https://jqueryvalidation.org/documentation/ 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R