I'm trying to put mask in my sharepoint list, unfortunately answers from similliar questions are too old, so jqueries doesn't work at all (or they are false added by me)

I don't have Sharepoint designer and i'm relatively new on Sharepoint (i use sharepoint 2013), so any help will be appreciated!

My situation: one column in list must always include some fixed letters, assumed 'ABC-XXX-XXX' instead of X's must be numbers.

input mask for textbox in sharepoint 2013

Here was posted good solution, but it doesn't work. Maybe it could be solved somehow with formulas in standard SharePoint Field Validation, idk :( Please help :)

1 Answer 1


You can hook into the client side rendering (CSR) system to register field validators to validate the value of the column before it is saved.

There are some examples here and here and here, and here is an example pulled from some code I wrote just last week:

var MyNamespace = MyNamespace || {};

MyNamespace.MyFieldValidator = function myFieldValidator () {

    MyNamespace.MyFieldValidator.prototype.Validate = function (fieldValue) {
        var isError = false;
        var errorMessage = '';

        // you would have to figure out the regex to validate your particular format
        // in this case the regex is looking for two capital letters followed by
        // a dash, followed by two numeric digits
        var myFormat = /^[A-Z]{2}-\d{2}$/g;

        // in this case, i am checking that the field actually has a value before checking
        // if it matches the regex.  this makes the field optional - otherwise, an empty field
        // (empty string) would not match the regex and the validation would fail, making it
        // impossible to save the item
        if (fieldvalue && myFormat.test(fieldValue) === false) {
            isError = true;
            errorMessage = 'Must be in the format "XX-00": two letters dash two numbers.';
        return new SPClientForms.ClientValidation.ValidationResult(isError, errorMessage);

MyNamespace.MyFieldFieldOverride = {
    edit: function edit (ctx) {

        // get the form context and create a new validator set
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        var fieldValidators = new SPClientForms.ClientValidation.ValidatorSet();

        // if the field has been marked as required, register the default required field validator
        if (formCtx.fieldSchema.Required) {
            fieldValidators.RegisterValidator(new SPClientForms.ClientValidation.RequiredValidator());

        // register our custom validator
        fieldValidators.RegisterValidator(new MyNamespace.MyFieldValidator());

        // add the error callback and register the validator set with the form context
        formCtx.registerValidationErrorCallback(formCtx.fieldName, MyNamespace.MyFieldFieldOverride.onError);
        formCtx.registerClientValidator(formCtx.fieldName, fieldValidators);

        // render the default form control for a text column
        // (this is assuming you are using a text column)
        var returnHtml = SPFieldText_Edit(ctx);

        // add a spot for our custom error message
        returnHtml += "<span id='MyFieldCustomError' class='ms-formvalidation ms-csrformvalidation'></span>";
        return returnHtml;
    onError: function onError (error) {
        document.getElementById('MyFieldCustomError').innerHTML = "<span role='alert'>" + error.errorMessage + "</span>";
    render: function render () {
            Templates: {
                Fields: {
                    MyField: {
                        'NewForm': MyNamespace.MyFieldFieldOverride.edit,
                        'EditForm': MyNamespace.MyFieldFieldOverride.edit

// handle MDS-enabled or MDS-disabled situations
RegisterModuleInit(SPClientRenderer.ReplaceUrlTokens('~site/path/to/MyFieldValidator.js'), MyNamespace.MyFieldFieldOverride.render);

In this case the CSR override script is meant to be attached to the field definition using the JSLink property of the field itself.

  • I suppose adding JSLink doesn't work by me. How could i find the path to my script? I've tried with ~sitecollection/Document Library/example.js Jul 5, 2019 at 13:13
  • The path to your script is wherever you have put it. If the document library where you put your script is in the root web of the site collection, that path should work. If you have put your script in a folder inside the document library, you have to remember to put the folder in there too: ~siteollection/Document Library Name/Folder Name/filename.js. If the document library where you put your script is not in the root web of the site collection, you will have to use ~site, or else include the subsite in the path: ~sitecollection/subsite/doclib/folder/file.js. Jul 5, 2019 at 16:28
  • thanks :) solved Jul 8, 2019 at 9:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.