Restrictions for input type=text

Question

Could someone help me with restrictions for input text?

<input type = text size = 18 name = part_numb value = '' pattern = '([A-NP-Z0-9 -]). {0,50}' id = 'part_numb' required>

In this case, it's not working.

My restrictions are:

1. The value can't content letter "O", auto-replacement with number "0"

2. The value can't content small letters, only Capital. (auto-replacement)

3. The value can't content special symbols except "-" but the value can't start or finish with "-" (auto-removal)

4. The value can't content free spaces. (auto-removal)

5.  This input is required.

6. The symbols have to be "A-N", "P-Z", "0-9", "-" 

I thinks that have to use "onChange", but I am not sure.

Please excuse me if this topic is not for here.

Thanks in advance.

Answer 1

Ok. Thats the correct answer:

 <script src="../../js/2.1.1.js"></script>

print"<tr><td>PN:</td><td><input type=text size=18 name='pn' class='validate-field' id='pn' value='$pn'></td></tr>";

<script type="text/javascript">

    const replacer = (val) => {
        if ((/[O]/g).test(val)) {
            val = val.replace(/[O]/g, '0');
        } else if ((/^[-]/g).test(val)) {
            val = val.replace(/[-]/g, '');
        } else if ((/[^\w-]/g).test(val)) {
            val = val.replace(/[^\w-]/g, '');
        }
        return val;
    };

    $(":text.validate-field").on("keyup change paste", function() {
        this.value = this.value.toUpperCase();
        (/^[A-NP-Z0-9][A-NP-Z0-9-]+[A-NP-Z0-9-]$/g).test(this.value) ? this.value : this.value = replacer(this.value);
    });

    $(":text.validate-field").on("blur", function() {
        (/[-]$/g).test(this.value) ? this.value = this.value.replace(/[-]$/g, '') : null;
    });


</script>

It works properly