I have my chat and I dont want people to send empty message so I would like that my input become required. Thanks for your help.

I tried to put "required='required'" in the input line, I also tried veeValidate but it broke my chat when I use it, I also tried to put "Required = true" in Props and data but without a good result

This is ChatForm.vue

<template>
    <div class="input-group" >
        <input id="btn-input" type="text" name="message"  class="form-control input-sm" placeholder="Ecrire..." v-model="newMessage" @keyup.enter="sendMessage">

        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm"  id="btn-chat" @click="sendMessage">
                &#10003
            </button>
        </span>
    </div>
</template>

<script>


    export default {
        props: ['user'],

        data() {
            return {
                newMessage: '',
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                setTimeout(function() {
                    const messages = document.getElementById('mess_cont');

                    messages.scrollTop = messages.scrollHeight;
                    }, 200);
                this.newMessage = '';

            }

        }
    }


</script>

And this is my form in the app.blade.php

  <div id="app" class="container-chat">

                    <div class="row">
                        <div class="col-md-12 col-md-offset-2">
                            <div class="col-md-12 col-md-offset-2">
                                <div class="panel-body panel-content" id="mess_cont">

                                    <chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>
                                </div>
                                <div class="panel-footer">
                                    <chat-form
                                            v-on:messagesent="addMessage"
                                            :user="{{ Auth::user() }}"
                                    ></chat-form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

I have my chat and I dont want people to send empty message so I would like that my input become required. Thanks for your help.

I tried to put "required='required'" in the input line, I also tried veeValidate but it broke my chat when I use it, I also tried to put "Required = true" in Props and data but without a good result

This is ChatForm.vue

<template>
    <div class="input-group" >
        <input id="btn-input" type="text" name="message"  class="form-control input-sm" placeholder="Ecrire..." v-model="newMessage" @keyup.enter="sendMessage">

        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm"  id="btn-chat" @click="sendMessage">
                &#10003
            </button>
        </span>
    </div>
</template>

<script>


    export default {
        props: ['user'],

        data() {
            return {
                newMessage: '',
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                setTimeout(function() {
                    const messages = document.getElementById('mess_cont');

                    messages.scrollTop = messages.scrollHeight;
                    }, 200);
                this.newMessage = '';

            }

        }
    }


</script>

And this is my form in the app.blade.php

  <div id="app" class="container-chat">

                    <div class="row">
                        <div class="col-md-12 col-md-offset-2">
                            <div class="col-md-12 col-md-offset-2">
                                <div class="panel-body panel-content" id="mess_cont">

                                    <chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>
                                </div>
                                <div class="panel-footer">
                                    <chat-form
                                            v-on:messagesent="addMessage"
                                            :user="{{ Auth::user() }}"
                                    ></chat-form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

• javascript
• html
• css
• laravel
• vue.js

• Have you tried wrapping your input inside form? – asimhashmi Commented May 7, 2019 at 7:49
• Yes and it's also not working – Bastos Commented May 7, 2019 at 7:53
• Can you please post error you are facing for Vuelidate? below is an example if that works for you : import Vuelidate from 'vuelidate'; import { required } from 'vuelidate/lib/validators'; export default { validations: { Message: { required } } } – BeautifulWorld Commented May 7, 2019 at 8:00
• I mean, i dont have an error, but my chat dissapear when I use it – Bastos Commented May 7, 2019 at 8:04

3 Answers 3

Try to change your ChatForm.vue like this:

<template>
 <form @submit.prevent="sendMessage">   
   <div class="input-group" >
     <input id="btn-input" type="text" name="message"  class="form-control input-sm" placeholder="Ecrire..." v-model="newMessage" required>

     <span class="input-group-btn">
       <button class="btn btn-primary btn-sm" type="submit" id="btn-chat">
                &#10003
            </button>
        </span>
    </div>
</template>

You are not treating the input in the correct way, the input which is required needs to be inside a form and the required keyword will prevent the form submission if the input field is empty.

There are a few things I would do differently.

1/ Wrap your chat form in a tag, and execute the sendMessage() method on submit. This will give your users a nicer experience, as they can just to submit the message.

2/ Convert the button into a submit button so it triggers the form.submit event.

3/ You can easily disable the button by checking whether newMessage has contents. I don't think you need vee validate or anything else to achieve this; for something as simple as a chat form, your user doesn't need much more feedback than seeing a disabled button to realise (s)he needs to write something first.

4/ in the addMessage method you can just check the contents of newMessage and not do anything when it's empty. This is perfectly fine because you already hinted the user by disabling the button too.

I think this is a subtle way where you guide your user, but don't overdo it.

Please add name attributes to all of your form elements. Some of the element in my form had name attribute and some didn't. Element which had name attributes worked correctly but the one's which didn't had name failed.