caneara/iodine

Unable to get custom error for "same" rule

Closed this issue · 2 comments

Let's say we have 2 fields for password

<input type="text" id="password1" placeholder="Password">
<input type="text" id="password2" placeholder="Password Confirmation">

And the following setup for Iodine:

  const data = {
    password1: document.getElementById("password1").value,
    password2: document.getElementById("password2").value
  }

  const rules = {
    password1: ['required', 'string'],
    password2: ['required', 'string', { rule: 'same', param: data.password1 }],
  }
  
  const errors = {
    password1: {
      required: 'password1 is required'
    },
    password2: {
      required: 'password2 is required',
      same: 'password1 and password 2 don\'t match'
    }
  }
  
  const results = Iodine.assert(data, rules, errors);

  console.log(results);

If we enter hello for both fields, the validation is valid:

{
  "valid": true,
  "fields": {
    "password1": {
      "valid": true,
      "rule": "",
      "error": ""
    },
    "password2": {
      "valid": true,
      "rule": "",
      "error": ""
    }
  }
}

However, if we enter hello for the first password and world for the second one, we can't get the custom error message for the same rule because the value of the first password is appended to the rule's name.

{
  "valid": false,
  "fields": {
    "password1": {
      "valid": true,
      "rule": "",
      "error": ""
    },
    "password2": {
      "valid": false,
      "rule": "same:hello",
      "error": undefined
    }
  }
}

Here is a working code: https://codepen.io/tranduyhung/pen/oNJRYaX

Yes, that does appear to be a problem.

It would be great if you could submit a PR to address it. Otherwise I’ll have to review it again when I have some free time.

As a stopgap, you could make a point of modifying the “same” error message key to include the value from the first password input before you pass the error object to Iodine.

anver commented

Yes, that does appear to be a problem.

It would be great if you could submit a PR to address it. Otherwise I’ll have to review it again when I have some free time.

As a stopgap, you could make a point of modifying the “same” error message key to include the value from the first password input before you pass the error object to Iodine.

That's a valid fix for now, thx, it worked gr8 for me

      handleSubmit() {
        const fields = {
          first_name: this.first_name,
          last_name: this.last_name,
          phone_number: this.phone_number,
          email: this.email,
          username: this.username,
          password: this.password,
          confirm_password: this.confirm_password,
        }

        const rules = {
          first_name: ['required', 'string', 'minLength:3'],
          last_name: ['required', 'string', 'minLength:3'],
          phone_number: ['required', 'string' ],
          email: ['required', 'string', 'email'],
          username: ['required', 'string', 'minLength:3'],
          password: ['required', 'string', 'minLength:8'],
          confirm_password: ['required', 'string', {rule: 'same', param: this.password}],
        }

        const errors = {
          confirm_password: {
            [`same:${this.password}`]: 'Password and Confirm Password must match',
          },
        }

        console.log(Iodine.assert(fields, rules, errors));
      },

my alpinejs code if someone is interested how I fixed it