Vue-Test - Dingsdays

index.html

<div id="app">
	<form>
		<label for="email">Email-Adresse</label>
		<input type="email" required name="email" id="email" @keyup="validate" />
		<button id="submit" :disabled="disabled">Abschicken!</button>
	</form>
</div>

script.js

const app = new Vue({
	el: "#app",
	data: {
		email: "",
		disabled: true,
		buttonText: "mehr lesen"
	},

	methods: {
		validate(event) {
			const input = event.target;
			const validity = input.validity;
			
			this.disabled =  !validity.valid && !validity.valueMissing;
		}
	}
});


// jQuery
/*
    $(() => {
        const $submit = $('#submit');
        const $email = $('#email');
        $email.keyup(() => {
            $submit.prop(
                'disabled',
                $email.val().length === 0 ||
                !$email.prop('validity').valid
            );
        })
    });
*/

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

style.scss

body {padding: 40px;}

vue-test-dingsdays.markdown

Vue-Test - Dingsdays

A Pen by Jens Grochtdreis on CodePen.

License.