TutorialMeta
Ad

Validate User Input With Whitespace

- 1 answer

How to in real-time format user input? For example, the user puts A9364470240ZGS001 to the input field, and using JavaScript format it in the input field in real-time to be like: A 936 447 02 40 ZGS 001?

<div class="childDumpFile">
     <label for="ds">Dataset</label>
     <input type="text" class="form-control" id="ds" name="ds" value="{{Request::get('ds') ?? ''}}">
</div>
Ad

Answer

I found the true answer. These expectations are naming as "input-mask" and if you'd like to use. You have to use 3. party libraries. Some of them listing in following sites:

Libraries 1Libraries 2

I chose Cleave.js for your question. This is the demo:

<script src="https://nosir.github.io/cleave.js/dist/cleave.min.js"></script>
<script src="https://nosir.github.io/cleave.js/dist/cleave-phone.i18n.js"></script>
<script>
    function loadFunction() {
        // custom
        var cleaveCustom = new Cleave('.input-custom', {
            blocks: [1, 3, 3, 2, 2, 3, 3],
            delimiter: ' ',
        });
    }
</script>

<body onload="loadFunction()">
    A 936 447 02 40 ZGS 001
    <div class="container">
        <input class="input-custom" placeholder="Custom delimiter & blocks" />
    </div>
</body>
Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad