TextBox - How do I manually validate a single textbox on the client

Abdul

created 6 years ago (modified 6 years ago)

I have the following code for a textbox on a page

C#
@(  
                Html.DevExtreme()  
                  .TextBox()  
                  .ID("txtWidgetName")  
                  .ValidationMessageMode(ValidationMessageMode.Always)  
                  .ValidationError("Enter a valid widget name")  
                  .MaxLength(100)  
)

In javascript, I validate the control text and set isValid accordingly.

I am not using databinding/attributes to validate.

However when isValid is set to false, whilst the textbox style changes to indicate that validation has failed, I am not seeing a message.

Reading through the documentation, I understand my approach is not correct.

It appears that to any widget that needs validation must be created in a JS file as there is no Html.DevExtreme().Validator that can be added on a page.

Am I understanding this correctly?

Also can you confirm that validation using these widgets does not work like your other MVC server controls.

Ultimately, I just want to show a message once a textbox fails validation and isValid is set to false.

Would appreciate your input on this.

Many thanks

Abdul

Answers approved by DevExpress Support

DevExpress Support Team

created 6 years ago (modified 9 months ago)

Hello Abdul,

Updated

I'm happy to let you know that we introduced support for Standalone Editor Validation in v24.1: ASP.NET Core - Data Validation.

The recommended way to perform client-side data validation is to use model Data Annotation validation attributes. This approach is common for the ASP.NET MVC framework.
Since your editor is not bound to any model, it is necessary to validate its content using dxValidator. At the moment, there is no option to create dxValidator for an editor on the server side. The only way to accomplish this task is to do this on the client side. So, your code should be as follows:

C#
@(  
  Html.DevExtreme()  
    .TextBox()  
    .ID("txtWidgetName")  
    .ValidationMessageMode(ValidationMessageMode.Always)  
    .MaxLength(100)  
)

JavaScript
$(function () {  
        $("#txtWidgetName").dxValidator({  
            validationRules: [{ type: "required", message: "Enter a valid widget name" }]  
        });  
    });

Then, use the validate method when it is necessary to validate the editor.

JavaScript
$("#txtWidgetName").dxValidator("instance").validate()

I have created a sample project and recorded a screencast for your reference.

Regards,
Romeo

T706060.webm T706060.zip

Comments (2)

Abdul 6 years ago

Hi Romeo,

This clarifies how it works.

many thanks

Abdul

Assylbek (DevExpress Support) 9 months ago

Hello,

I'm happy to let you know that we introduced support for Standalone Editor Validation in v24.1: ASP.NET Core - Data Validation.

Please also refer to our other JavaScript-related features and, if time permits, leave your feedback in the survey.

Thank you in advance. Your feedback matters to us.

TextBox - How do I manually validate a single textbox on the client

Answers approved by DevExpress Support

Recently viewed tickets