<div x-data="{ name: '', email: '', errors: [] }">
    <form @submit.prevent="validateForm">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" x-model="name">
            <p x-show="errors.includes('name')" style="color: red;">Name is required</p>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" x-model="email">
            <p x-show="errors.includes('email')" style="color: red;">Email is required</p>
        </div>
        <button type="submit">Submit</button>
    </form>
    <p x-text="`Submitted Name: ${name}, Email: ${email}`" x-show="errors.length === 0 && name && email"></p>
</div>

<script>
    function validateForm() {
        this.errors = [];
        if (!this.name.trim()) {
            this.errors.push('name');
        }
        if (!this.email.trim()) {
            this.errors.push('email');
        }
    }
</script>

<div x-data="{ formData: { name: '', email: '', phone: '' }, errors: {} }">
    <form @submit.prevent="validateForm">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" x-model="formData.name">
            <p x-show="errors.name" style="color: red;" x-text="errors.name"></p>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" x-model="formData.email">
            <p x-show="errors.email" style="color: red;" x-text="errors.email"></p>
        </div>
        <div>
            <label for="phone">Phone:</label>
            <input type="text" id="phone" x-model="formData.phone">
            <p x-show="errors.phone" style="color: red;" x-text="errors.phone"></p>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

<script>
    function validateForm() {
        this.errors = {};
        Object.entries(this.formData).forEach(([field, value]) => {
            if (!value.trim()) {
                this.errors[field] = `${field.charAt(0).toUpperCase() + field.slice(1)} is required`;
            }
        });
    }
</script>

<div x-data="{ isSubmitted: false }">
    <form @submit.prevent="isSubmitted = true">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" required>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" required>
        </div>
        <button type="submit">Submit</button>
    </form>
    <p x-show="isSubmitted" style="color: green;">Form submitted successfully!</p>
</div>

<div x-data="{ name: '', email: '', errors: [], isSubmitted: false }">
    <form @submit.prevent="validateForm">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" x-model="name">
            <p x-show="errors.includes('name')" style="color: red;">Name is required</p>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" x-model="email">
            <p x-show="errors.includes('email')" style="color: red;">Email is required</p>
        </div>
        <button type="submit">Submit</button>
    </form>
    <p x-show="isSubmitted" style="color: green;">Form submitted successfully!</p>
</div>

<script>
    function validateForm() {
        this.errors = [];
        if (!this.name.trim()) this.errors.push('name');
        if (!this.email.trim()) this.errors.push('email');

        if (this.errors.length === 0) {
            this.isSubmitted = true;
        } else {
            this.isSubmitted = false;
        }
    }
</script>