How can I get a input required with vuejs

Question

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>

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
– BeautifulWorld, Commented May 7, 2019 at 8:00
I mean, i dont have an error, but my chat dissapear when I use it — Bastos
– Bastos, Commented May 7, 2019 at 8:04

asimhashmi · Accepted Answer · 2019-05-07 08:18:01Z

9

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.

answered May 7, 2019 at 8:18

asimhashmi

4,3861 gold badge17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sunderam Dubey · Accepted Answer · 2022-07-09 07:37:09Z

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.

Mohit Satish Pawar · Accepted Answer · 2021-07-21 21:36:35Z

0

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.

answered Jul 21, 2021 at 21:36

Mohit Satish Pawar

612 silver badges6 bronze badges

Collectives™ on Stack Overflow

How can I get a input required with vuejs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related