:messages attributes don't change the message.

[SergiArias]

Probably not this package fault, but the :messages attributes don't work for me.

I checked and it converts it correctly to the data-message-success and so on in the markup. But when testing, it always take the value in the database. So maybe this mechanism is not working in the html forms plugin side.

just as an example, this is what I have (I am using alpinejs)

<x-html-forms :form="$form" :messages="['success' => 'Thank you!', 'error' => 'Yikes! Try again.']"
  class="relative side-form"
  x-data="formComp()"
  @hf-submit="load(0.4, 1, 'in')"
  @hf-submitted=""
  @hf-success="load(0, 0.7, 'out'); success = true"
  @hf-error="load(1, 1, 'out')"
  x-bind:class="{'success': success}"
>
 ...
</x-html-forms>

[minemindmedia]

Hi @SergiArias - did you ever solve this?

[minemindmedia]

BTW, I've been trying to get this to play nice with the Iodine Validation Library but I am not very good at this stuff. https://github.com/mattkingshott/iodine

Everything validates great but I can't get the form to submit. If anyone has any ideas, this would be a super useful library to use along side this.

<x-html-forms
    :form="$form"
    id="contact"
    class="flex flex-wrap w-full space-y-8"
>
    <div class="space-y-8 lg:space-y-0 lg:flex lg:space-x-8 w-full">
        <div class="w-full lg:w-1/2">
            <input
                name="name"
                id="name"
                type="text"
                class="w-full border border-gray-400 px-4 py-2 placeholder-gray-500"
                placeholder="Name..."
            >
            <span class="text-red-700 font-bold uppercase text-xs block mt-2 inline hidden"></span>
        </div>
        <div class="w-full lg:w-1/2">
            <input
                name="email"
                id="email"
                type="email"
                class="w-full border border-gray-400 px-4 py-2 placeholder-gray-500"
                placeholder="Email Address..."
            >
            <span class="text-red-700 font-bold uppercase text-xs block mt-2 inline hidden"></span>
        </div>
    </div>
    <div class="flex space-x-8 w-full">
        <div class="w-full">
            <textarea
                name="message"
                id="message"
                class="w-full border border-gray-400 px-4 py-2 placeholder-gray-500"
                placeholder="Enter your message..."
                rows="6"
            ></textarea>
            <span class="text-red-700 font-bold uppercase text-xs block mt-2 inline hidden"></span>
        </div>
    </div>
    <div class="flex w-full justify-end">
        <input
        type="submit"
        value="Submit Your Quote"
        class="btn-gray-700"
        onclick="register(event)"
      />
    </div>
</x-html-forms>

<script>
    // Flag for whether the form is valid
let valid = false;

// Define the validation rules
const rules = {
    name : ['required', 'string', 'minimum:3', 'maximum:30'],
    email : ['required', 'string', 'minimum:6', 'maximum:255', 'email'],
    message : ['required', 'string', 'minimum:6', 'maximum:255'],
};



/**
 * Validate the registration form and submit it.
 *
 **/
function register(event)
{
    // Prevent the standard submission of the form
    event.preventDefault();

    // Reset the flag
    valid = true;

    // Iterate through the form fields
    for (const field in rules) {

        // Locate the field's input and validation span
        let input   = document.getElementById(field);
        let message = input.nextElementSibling;

        // Hide all existing messages
        message.classList.add('hidden');

        // Validate the field's value
        let result = Iodine.is(input.value, rules[field]);

        // Handle any failed validation
        if (result !== true) {

            // Toggle the flag
            valid = false;

            // Update the form
            message.classList.remove('hidden');
            message.innerHTML = Iodine.getErrorMessage(result);

        }
    }

    // Check whether to submit the form
    if (valid) {
        document.getElementById('contact').submit();
    }
}
</script>

[SergiArias]

Hi @SergiArias - did you ever solve this?

No, I gave up. As I can update the messages in the wordpress panel, it's not a big problem. But I think the feature should be taken off the readme instructions as it doesn't work.

About the iodine, I don't have any idea, sorry...