Forums Ignite UI for ASP.NET Core
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Azhar Amin
80
IGgrid Custom validation for Textbox
posted

Hi,
As i am currently working with IGgrid, but the default validation of textbox allows the "spacebar" and enters a blank space even if you don't add any value in text box and it saves the data even if it is empty.

 This is default validation, it accepts blank space before we enter any character, so if i just press spacebar on textbox, it considers that as a value.

setting.ColumnSetting().ColumnKey("CustomerValue").EditorType(ColumnEditorType.Text).Required(true).Validation(true);



I need help for setting up custom validation for same, below is the jquery i wrote, it works for textbox but it display the message as alert, i want the message as defualt ie: "This field is required" on top of textbox

var emptyCustomerValue = ui.values.CustomerValue.trim().toLowerCase();
var isEmptySpace = emptyCustomerValue.replace(/^\s+|\s+$/g, "");
if (isEmptySpace === "") {
terminationReasonMappingGrid.showModel(terminationReasonMappingGrid.constants.commonErrorTitle, terminationReasonMappingGrid.constants.emptySpacesNotAllowed);
isClickedOnSave = false;
return false;
}

});

The above code displays it in Alert window

  • 700
    Verified Answer
    Offline posted

    Hello,

    Thank you for posting into our community!

    I have been looking into your question and an approach I could suggest, in order to apply custom validation using a regular expression and display the message above the field as a popover, is configuring the igGridUpdating’s editorOptions. Furthermore, for the regular expression you could use the igValidator’s pattern option and for displaying the message in a certain position you could configure the notificationOptions option.

    Additionally, in order to demonstrate my suggestion, I have prepared a small sample using the abovementioned approach. In the attached sample, I have configured the editorOptions for the Product Name and Condition columns and when typing whitespaces or not providing a value, different error messages are shown above the field. This could be observed in the below attachment:

    Here could be found my sample for your reference. Please test it on your side and let me know if you need any further assistance regarding this matter.

    In addition, if this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce it.

    Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Entry Level Software Developer