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"> ✓ </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>
Advertisement
Answer
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"> ✓ </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.