fringe void
Почему ругается на Alpine.data...
<form id="contact-form"
x-data="contactForm"
@submit.prevent="submit"
<label>
Имя
<input type="text" name="name" x-model="name" @input="validate('name')" autocomplete="on" />
</label>
<p x-show="errors.name" x-text="errors.name" style="color:red;"></p>
<label>
Email
<input type="email" name="email" x-model="email" @input="validate('email')" autocomplete="on" />
</label>
<p x-show="errors.email" x-text="errors.email" style="color:red;"></p>
<label>
Телефон
<input type="tel" name="phone" x-model="phone" @input="validate('phone')" autocomplete="on" />
</label>
<p x-show="errors.phone" x-text="errors.phone" style="color:red;"></p>
<input type="text" name="username" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit" :disabled="!valid">Отправить</button>
<p x-show="success" style="color:green;">✅ Заявка отправлена!</p>
<p x-show="serverError" x-text="serverError" style="color:red;"></p>
</form>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('contactForm', () => ({
name: '',
email: '',
phone: '',
errors: {},
valid: false,
success: false,
serverError: '',
rules: {
...
},
validate(field) {
const msg = this.rules[field](this[field]);
if (msg) {
this.errors[field] = msg;
} else {
delete this.errors[field];
}
this.valid = Object.keys(this.errors).length === 0;
},
async submit() {
....
},
}));
});
</script>
proven girder