Magento js validation

I want to have the validation for my Html code, I have added the related code to it, but still does not work, please help.

<div class="component-wrapper">
<div class="field">
    <label class="label" for="email"><span data-bind="i18n: 'New Customer'"></span></label>
    <div class="control" data-mage-init='{"validation":{}}'>
        <input name="customername"
               id="customername"
               type="text"
               class="input-text"
               data-bind='value: customerData'
               data-validate="{'validate-alphanum-with-spaces':true}">
    </div>
</div>
<div class="primary">
    <button type="button" class="action action-login secondary" data-bind="click: addNewCustomer">
        <span data-bind="i18n: 'Save'">Save</span>
    </button>
</div>
<div class="customer-list" style="width: 20%;background: gray;margin-top: 10px;" data-bind="foreach: customerName">
    <li data-bind="text: name"></li>
</div>

it still allows me to key in special character after added validation code.