How to Change Telephone Field Input Type Validation on Checkout Onepage

checkoutformsvalidation

How can I change telephone field input type validation on check out onepage ?

Currently it takes input numeric with no space. I want to change it space with numbers

As an example,

current input format is: 1234567899999

But when i try this input format: 123 45468 99999

it is not working. What should I do to format this number?

Best Answer

Magento uses Prototype library to manage form validation of input fields. This comes in handy, because all you need to do when writing custom form is to assign a valid class names to your input fields, and pass the form id to VarienForm object.

you need add css class validate-phoneStrict at field which will do this type validation. you need to remove validate-number etc validation

You need see js field validation at js\prototype\validation.js

        <input type="tel" name="billing[telephone]" 
    value="<?php echo $this->escapeHtml($this->getAddress()->getTelephone()) ?>"
     title="<?php echo $this->__('Telephone') ?>" class="validate-phoneStrict
     input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('telephone') ?>"
 id="billing:telephone" />

and you can also do below format:

(123) 456-7890 or 123-456-7890

Related Solutions

Magento 2 – How to Modify Checkout Page

To remove/disable field (for example region) you should change the configuration to
```
<item name="region_id" xsi:type="array">
    <item name="visible" xsi:type="boolean">false</item>
</item>
```
To disable second address line you can use Stores -> Configuration. Go to Store -> Configuration -> CUSTOMERS -> Customer Configuration -> Name and Address Options. Set Number of Lines in a Street Address = 1
Change the order of some fields.

You can change order of some fields on shipping address form by modifying value of node sortOrder node.
```
<item name="country_id" xsi:type="array">
     <item name="sortOrder" xsi:type="string">10</item>
</item>
```

Create validation for the custom fields.

To create validation for you field you need to add such configuration to your field.

<item name="your_field" xsi:type="array">
    <item name="validation" xsi:type="array">
        <item name="min_text_length" xsi:type="number">0</item>
    </item>
</item>

Possible validation rules collected in Magento/Ui/view/base/web/js/lib/validation/rules.js

Magento 2.2.3 – How to Create Custom Form

Create layout XML

/app/code/Company/Module/view/frontend/layout/module_index_custom.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Company\Module\Block\Custom" name="customer_index_gallery" template="Vendor_Module::custom.phtml" cacheable="false"/>
    </referenceContainer>
</page>

/app/code/Company/Module/Block/Custom.php

<?php

namespace Vendor\Module\Block;

class Custom extends \Magento\Framework\View\Element\Template
{
    /**
     * Construct
     *
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    )
    {
        parent::__construct($context, $data);
       }

    /**
     * Get form action URL for POST booking request
     *
     * @return string
     */
    public function getFormAction()
    {
        return '/companymodule/controller_name/custom';
        // here controller_name is index, action is booking
    }
}

/app/code/Company/Module/view/frontend/templates/custom.phtml

<form action="<?php echo $block->getFormAction() ?>" method="post">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input name="email" type="text">
    <input type="submit" value="informations">
</form>

/app/code/Company/Module/Controller/Index/Custom.php

<?php

namespace Company\Module\Controller\Index;

use Magento\Framework\Controller\ResultFactory;

class Custom extends \Magento\Framework\App\Action\Action
{
    /**
     * Booking action
     *
     * @return void
     */
    public function execute()
    {
        // 1. POST request : Get booking data
        $post = (array) $this->getRequest()->getPost();

        if (!empty($post)) {
            // Retrieve your form data
            $firstname   = $post['firstname'];
            $lastname    = $post['lastname'];
            $email       = $post['email'];
          
            // Doing-something with...

            // Display the succes form validation message
            $this->messageManager->addSuccessMessage('Booking done !');

            // Redirect to your form page (or anywhere you want...)
            $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
            $resultRedirect->setUrl('/companymodule/index/custom');

            return $resultRedirect;
        }
  
    }
}

Best Answer

Related Solutions

Magento 2 – How to Modify Checkout Page

Magento 2.2.3 – How to Create Custom Form

Related Topic