[Issue] Fix type when validating field using attribute rules

[m2-assistant]

This issue is automatically created based on existing pull request: #38773: Fix type when validating field using attribute rules

---

Description (*)

If attribute based rules are used to specify validation of a field in HTML, incorrect type is used when validating.
For example, validation rule is ipv4 and has assigned a value of true and is processed as String, but should be Boolean instead.

<input name="field" ipv4="true" ... />

Related Pull Requests

N/A

Fixed Issues (if relevant)

N/A

Manual testing scenarios (*)

1. create new form (for example on Homepage, custom-form.phtml)
2. paste the following code:

<form class="form" action="#" id="custom-form" method="post">
    <fieldset class="fieldset">
    <div class="field required">
            <label class="label" for="custom-field"><span>Attribute Rule</span></label>
            <div class="control">
                <input name="custom-field" id="custom-field" title="Attribute Rule" value="ipv4" ipv4="true" class="input-text" type="text" />
            </div>
        </div>
    </fieldset>
</form>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Customer/js/block-submit-on-send": {
                "formId": "custom-form"
            }
        }
    }
</script>

3. submit the form, error will be displayed on the field. When debugging the applied rule using the following command in rules method:

rules: function( command, argument ) {
...
              data = $.validator.normalizeRules(
                $.extend(
                    {},
                    $.validator.metadataRules(element),
                    $.validator.classRules( element ),
                    $.validator.attributeRules( element ),
                    $.validator.dataRules( element ),
                    $.validator.staticRules( element )
                ), element );

// debug the value
              if (!!$.validator.attributeRules(element) && Object.keys($.validator.attributeRules(element)).length > 0) {
                console.log($.validator.attributeRules(element));
              }
...

• Actual value: String
  {ipv4: 'true'}
• Expected value: boolean
  {ipv4: true}

Questions or comments

The PR has been elaborated in my article which describes the issue in more details: Deep Dive into Validation Rules

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @engcom-November. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• 5. Add label Issue: Confirmed once verification is complete.
• 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-November]

Hello @dvrgoc,

Thank you for the report and collaboration!

We are able to get the actual result, that is ipv4 value is string in jquery.validate.js.
Please refer the screenshot:

But can you mention the issue you are facing due to change in datatype.

[dvrgoc]

HI @engcom-November

that is correct, this is datatype issue.

While I was working with other methods of implementing the validation rules, all other rules return Boolean, not String.

Please read my article which covers the topic - Deep Dive into Validation Rules

If you have any questions, let me know.

[engcom-November]

Hello @dvrgoc,

Thanks for the update.

I agree with this, inconsistent return type compared to rest of the methods is not a good practice and might cause error further down the line.
Hence confirming this.