We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

unable to get validation working with maskedtextbox

Thread ID:

Created:

Updated:

Platform:

Replies:

142446 Feb 5,2019 01:19 AM UTC Feb 7,2019 09:33 AM UTC ASP.NET Core - EJ 2 6
loading
Tags: Input Mask
Andrew
Asked On February 5, 2019 01:19 AM UTC

Hello Community,

My project is using ASP.NET Core validation in my model,  but I'm not seeing any validation for my masked text box. All other inputs show a validation error message when necessary but those messages are missing the proper 'input name' within the error message. 

I created a test project in which i attempted to recreate the issue, however to my surprise the maskedtextbox worked correctly. The other validation messages also were corrected.

Seems there is a conflict somewhere, but I can't for the life of me figure it out. 

I've included the html output where you can see there are different HTML attributes being output. 

I've also include my _Layout.cshtml and Create.cshtml. If there is anything else please let me know.

Thank you. 


Attachment: solution_18d9e05c.zip

Christopher Issac Sunder K [Syncfusion]
Replied On February 5, 2019 10:36 AM UTC

Hi Andrew, 
 
Thank you for contacting Syncfusion support. 
 
We checked your reported issue “Validation not working in MaskedTextBox“ and your attached files. On checking your attached cshtml file and output component element structure, we suspect you need to perform server side validation. Based on that, we prepared a sample with your cshtml file and included server side validation for it and validation was working fine and we could not reproduce your reported issue. Please check the below attached sample for your reference, 
Sample: 
 
Video: 
 
If you need to perform client side validation, please check the below documentation, 
 
If you are still facing issue in your application-level, please let us know the details so that we can help you further. 
 
Thanks,
Christo


Andrew
Replied On February 6, 2019 01:24 AM UTC

Hello Christo,

Thanks for your reply. Server side validation is what I'm trying to get working. 

I've provided a sample of the issue I'm facing. 



Attachment: ValidationIssue.UI.Web_df6804e1.zip

Christopher Issac Sunder K [Syncfusion]
Replied On February 6, 2019 11:46 AM UTC

Hi Andrew, 

Thanks for the update. 

In our MaskedTextBox component, we are not providing the server side validation for all the cases. We will provide the server side validation for some cases only(Submit action). For this case, we suggest you to use client side validation for MaskedTextBox component. Please refer the below code block. 

[Model

//Don’t need to specify the validation rules in server side 
public string PhoneNumber { get; set; } 

[CSHTML

<ejs-maskedtextbox id="PhoneNumber" ejs-for="PhoneNumber" mask="000-000-0000" change="validate" name="PhoneNumber"> 
</ejs-maskedtextbox> 

[Script

// checks the length of mask value and returns corresponding boolean value 
var customFn = function(args) { 
    var argsLength = args.element.ej2_instances[0].value.length; 
    if(argsLength != 0){ 
        return argsLength >= 10; 
    } else { 
        return true; 
    } 
} 
 
//value is returned based on the length of mask 
var custom = function(args) { 
    var argsLength = args.element.ej2_instances[0].value.length; 
    if(argsLength == 0){ 
    return 0; 
    } else { 
        return argsLength; 
    } 
}; 
 
// sets required property in the FormValidator rules collection 
var options = { 
    rules: { 
        'PhoneNumber': { numberValue: [customFn, 'Enter valid mobile number'] }, 
    }, 
} 
 
// defines FormValidator to validate the MaskedTextBox 
    var formObject = new ej.inputs.FormValidator('#customerForm', options); 
 
//FormValidator rule is added for empty MaskedTextBox 
    formObject.addRules('PhoneNumber', { maxLength: [custom, 'Enter mobile number'] }); 
 
// places error label outside the MaskedTextBox using the customPlacement event of FormValidator 
 
formObject.customPlacement =  function(element, error) { 
    document.querySelector(".form-group").appendChild(error); 
}; 
 
function validate() { 
   formObject.validate('PhoneNumber'); 
} 

To know more details about client side Form validation in MaskedTextBox, please check the below help document. 


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

Thanks,  
Christo 


Andrew
Replied On February 6, 2019 03:34 PM UTC

Christo, 

I understand that I could use the client side FormValidator. However, there must be some other conflict/issue effecting my project. Server side should work, I'm only validating on submit. 

If I can take the affected code and place it in a new project and it works (same as the sample you sent), It should work in my existing project! Please help!



Andrew
Replied On February 6, 2019 11:41 PM UTC

Christo,

Please disregard my last request for assistance, after much testing I have come to understand how things are working. 

I humbly thank you for your time.  

Christopher Issac Sunder K [Syncfusion]
Replied On February 7, 2019 09:33 AM UTC

Hi Andrew, 

We are glad to hear that the issue has been resolved at your end. Please let us know if you require any further assistance. 

Thanks, 
Christo 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;