CODEWITHSUNDEEP
vue.jsauthenticationnativescriptnative
Madhu
Madhu

Reputation: 7

How to display an error message when a field is empty in a native script form?

I'm trying to add an error message when the user leaves the email and password field empty, but it's not working, not sure where the problem is. I've tried to add some if statements in the script file so that the user cannot leave the field empty but I can't get the error message to display. 

<template>
<Page>
    <ActionBar title="Register" />
    <ScrollView>
        <StackLayout id="register" class="registerform">
            <Label text="Email:" class="Email" />
            <TextField v-model="email" class="email"></TextField>
            <Label text="Password:" class="Password" />
            <TextField v-model="password" class="password"></TextField>

            </TextField>
            <Button text="Register" @tap="onRegisterTap" />
            {{userM}}
        </StackLayout>
    </ScrollView>
   </Page>
</template>

<script>
export default {
    name: "register",
    data() {
        return {
            email: "",
            password: "",
            userM: ""
        };
    },
    methods: {
        onRegisterTap: function() {
            this.userM = "";
            if (!this.email) {
                this.userM = "error: empty email";
                return;
            }
            if (!this.password) {
                this.userM = "error: empty password ";
                return;
            }
                else {
                this.userM =   " error: username or password is incorrect.";
                return;
            }



    };

</script>

Upvotes: 0

Views: 560

Answers (2)

mai elrefaey
mai elrefaey

Reputation: 392

You may use alert to view your error message to user:

onRegisterTap: function() {

            if (!this.email) {
                alert("error: empty email")
                return
            }
            if (!this.password) {
                alert("error: empty password ")
                return
            }
}

Upvotes: 0

Igor R.
Igor R.

Reputation: 897

You need to add userM in data(), as otherwise Vue doesn't know that it should be reactive.

And you also need a Label to display the message in. In your case <Label :text="userM" class="UserM" /> should work. Here it is working based on your code: https://play.nativescript.org/?template=play-vue&id=N7NbOk

Upvotes: 1

Related Questions