Adding HTML5 Input Attribute to Registration Form

Question

Since, my theme does not handle form validation such as preventing symbols in text fields. I decided to use html5 input validations such as min/max for numbers and pattern for text as simple workaround.

I edited register.phtml template at /persistent/customer/form and added html5 validation attributes to email, telephone, pincode etc.

However, I was unable to find input fields of First Name and Last name. They were being generated probably by this snippet :

echo $this->getLayout()->createBlock('customer/widget_name')->setObject($this->getFormData())->setForceUseCustomerAttributes(true)->toHtml();

How do I add a pattern such as pattern="[a-zA-Z0-9\s]+" to First Name and Last Name input fields

Answer 1

On my mobile am writing this one, so please make sure the template path by yourself.

The customer names are generated from the template file

base/default/template/customer/widget/name.phtml

. If you want to change the input elements of name fields, then copy that to your theme

default/yourtheme/template/customer/widget/name.phtml

As another approach use the prototype validation class validate-alphanum in your input element to allow only digits and alphabets. Please check the file js/prototype/validation.js for your reference.