x-wizard:step.rules does not allow for dots in property name

[madsem]

Hey there,

first off, this is an amazing package, thanks a lot for this. :)

Now, I am unsure if this is an AlpineJs issue, or if I'm just using it wrong, or if this has something to do with the wizard itself. But I thought I'd ask here.

I have a form with x-init like so:

<form 
            x-cloak
            x-data="leadForm()"
            class="border rounded overflow-hidden">

I initialize the leadForm() using alpine.data() in a js file, like so:

import Alpine from "alpinejs";
import "./modules/alpine/dynamic-keyword-insertion";
import wizard from "@glhd/alpine-wizard";
import data from "./modules/alpine/form-data/index";

window.Alpine = Alpine;

Alpine.plugin(wizard);
Alpine.data("leadForm", data);

Alpine.start();

./modules/alpine/form-data/index

export default () => ({
  step: 1,
  formData: {
    zip: null,
    fname: null,
    lname: null,
    email: null,
    address: null,
    phone: null,
    metaData: {},
  },
  init() {
    // Prepopulate formData from url query string params,
    // to hide wizard steps that have formData set.
    const queryParams = new URLSearchParams(location.search);

    // Go over all available options
    Object.keys(this.formData).forEach((key) => {
      // Check if obj has key, otherwise use default option
      this.formData[key] = queryParams.get(key);
    });

    console.log(this.formData);
  },
});

In my form, I'd like to write a custom Validatorjs rule that will make an API call to check if the entered zip code is valid, but I am unable to reference the formData zip code property in the validator directive, like so:

<div
              x-wizard:step="formData.zip != null;"
              x-wizard:if="formData.zip == null"
              x-wizard:title="Enter Your Zip Code"
              x-wizard:step.rules="{ formData.zip: 'required|numeric|min:10|max:120' }"
              class="flex items-center space-x-6">
              <label for="zip-input">
                Your Zip:
              </label>
              <input
                x-model="formData.zip"
                id="zip-input"
                class="px-2 py-3 border border-gray-300 shadow-sm rounded-md sm:text-sm focus:ring-indigo-500 focus:border-indigo-500"
              />

results in SyntaxError: Unexpected token '.'. Expected a ':' following the property name 'formData'.

Also wrapping the property name in quotes/double quotes does not work.

[inxilpro]

Sorry… somehow I missed this until now!

I would expect either of the following to work:

x-wizard:step.rules="{ 'formData.zip': 'required|numeric|min:10|max:120' }" (add quotes) x-wizard:step.rules="{ formData: { zip: 'required|numeric|min:10|max:120' } }" (nested)

What errors do you get with those two options?

[thecyrilcril]

@inxilpro how do I trigger the validation check?

[Joemires]

I'm having an error as well when trying to use the validation Attached is the screenshot of my console