Add custom field on OpenCart 2.1.0.1. checkout page

Question

I have created a custom payment method in my OpenCart 2.1.0.1. I have edited my payment_method.tpl as well and added a custom field for customers to add one identifical number which is exactly 10 symbols lenght. This is my HTML:

<label class="control-label" for="input-payment-egn"><?php echo $text_egn; ?></label>
    <input type="text" name="egn" value="" placeholder="Въведете вашето ЕГН" id="input-payment-egn"
               class="form-control"/>
</div>

How can I require this field, validate it and to add it in order info in admin page and in clients order info?

Answer 1

So you hard-coded for an extra field? Why don't you use the opencart's functionality for extra fields? You can make it required and you can place it wherever you want. Account or Checkout. You can have validation rules and/or change the type of the field.

Edited my answer for the javascript & the HTML that will check if the field has value or not and also accept only 10 chars:

The html code should change to:

<label class="control-label" for="input-payment-egn"><?php echo $text_egn; ?></label>
    <input type="text" maxlength="10" name="egn" value="" placeholder="Въведете вашето ЕГН" id="input-payment-egn" class="form-control"/>
</div>

/* With 'form' it will fire on any form into the page. Please change it, by form's id. */
$('form').on('submit', function() { 
  /* Get the value and the length of the field */
  var egn = $('#input-payment-egn').val();
  var egnLength = egn.length;
  
  /* If it's less than 10 never continue */
  if (egnLength < 10) {
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>