Unkown required format

[dali-rajab]

Hello everyone !

Here is a little bug

It's simply not indicating the required format.

So i suggest, in this block :

https://github.com/prestarocket-agence/classic-rocket/blob/2e78102a535fed95dfc7bbfe22ee8ecea66aec6f/templates/_partials/form-fields.tpl#L155-L168

we add a litle line (after the 165th line) to become like that :

            {elseif $field.type === 'password'}

                {block name='form_field_item_password'}
                    <div class="col-12 col-md-8 input-group js-parent-focus">
                        <input
                                class="form-control js-child-focus js-visible-password{if !empty($field.errors)} is-invalid{/if}"
                                name="{$field.name}"
                                id="f-{$field.name}_{$uniqId}"
                                type="password"
                                value=""
                                pattern=".{literal}{{/literal}5,{literal}}{/literal}"
                                data-validation-notice="{l s='At least 5 characters long' d='Shop.Forms.Help'}"
                                {if isset($autocomplete[$field.name])} autocomplete="{$autocomplete[$field.name]}"{/if}
                                {if $field.required}required{/if}
                        >

And in this block :

https://github.com/prestarocket-agence/classic-rocket/blob/2e78102a535fed95dfc7bbfe22ee8ecea66aec6f/_dev/js/components/form.js#L70-L82

we modify it to become like this :

          form.addEventListener('submit', function(event) {
              if (form.checkValidity() === false) {
                  event.preventDefault();
                  event.stopPropagation();
                  $('input:invalid,select:invalid,textarea:invalid',form).each(function( index ) {
                      var _field = $( this ),
                          _parent = _field.parents('.form-group').first(),
                          _field_additionnal_validation_notice = _field.data('validation-notice') ? _field.data('validation-notice') : '';
                      $('.js-invalid-feedback-browser',_parent).text(`${_field[0].validationMessage} ${_field_additionnal_validation_notice}`);
                       if(!divToScroll){
                           divToScroll = _parent;
                       }
                  });
              }

The ternary operator here is to avoid undefined cases :

_field_additionnal_validation_notice = _field.data('validation-notice') ? _field.data('validation-notice') : '';

After that, compile npm, and here it is !

[prestarocket]

@dali-rajab thx. i will test it