Mask for textbox in sharepoint 2013

Question

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 :)

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 () {
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
            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);
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.