[英]How can I check if fields are empty on Send Message button?
<template>
<div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" v-model="firstName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="lastName">Last name</label>
<input type="text" class="form-control" v-model="lastName" placeholder="Enter your last name">
</div>
<div class="form-group">
<label for="message">Type Your message</label>
<textarea class="form-control" v-model="message" rows="3"></textarea>
</div>
<div class="form-group form-check" v-for="number in numbers" :key="number">
<input type="checkbox" :value="number.Broj" v-model="checkedNumbers">
<label class="form-check-label" >{{number.Broj}}</label>
</div>
<button type="submit" class="btn btn-primary" v-on:click="alert" @click="sendMessage">Send message</button>
</div>
</template>
<script>
import http from "../http-common.js";
import userServices from "../services/userServices.js";
export default {
data()
{
return {
firstName: null,
lastName: null,
message: null,
numbers: "",
checkedNumbers: [],
success: 'You have submitted form successfully'
};
},
methods:
{
async sendMessage()
{
await http.post("/message", {firstName: this.firstName, lastName: this.lastName, message: this.message, numbers: this.checkedNumbers});
this.$data.firstName = "",
this.$data.lastName = "",
this.$data.checkedNumbers = [],
this.$data.message = "";
},
alert() {
alert(this.success)
if(event)
alert(event.target.tagName)
},
retrieveNumbers() {
userServices.getNumbers().then(response => {
this.numbers = response.data;
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}
},
created() {
this.retrieveNumbers();
}
}
</script>
So I want to add the option of checking input fields when user clicks "Send Message" button.所以我想在用户单击“发送消息”按钮时添加检查输入字段的选项。 I tried some options but I faield at that.我尝试了一些选择,但我没有这样做。 So please I would appretiate if someone would help me.所以,如果有人会帮助我,我会很感激。 I'm still learning.我还在学习。
I know I have to use v-if and create the method for checking the fields.我知道我必须使用 v-if 并创建检查字段的方法。
So if you would be most kind and help me solve this problem I would be really grateful.因此,如果您能帮我解决这个问题,我将不胜感激。
Thank you dev, community <3谢谢开发者,社区 <3
Can I please get a concrete answer.能否请教一个具体的答案。 Because I'll learn in that way, so please without condescending and "no-answers"因为我会以这种方式学习,所以请不要居高临下和“不回答”
You can simply define a method to check the fields and call that before the HTTP request in the sendMessage
method.您可以简单地定义一个方法来检查字段并在sendMessage
方法中的 HTTP 请求之前调用它。
You can initialize your data as an empty string ""
and have a method like this:您可以将数据初始化为空字符串""
并使用如下方法:
validateForm() {
return this.firstName != "" && this.lastName != "" && this.message != ""
}
Update your sendMessage
method to something like this:将您的sendMessage
方法更新为如下内容:
async sendMessage() {
const isFormValid = this.validateForm()
if (isFormValid) {
await http.post(....)
...
}
}
You can do it manually:您可以手动执行此操作:
<script> import http from "../http-common.js"; import userServices from "../services/userServices.js"; export default { data() { return { firstName: null, lastName: null, message: null, numbers: "", checkedNumbers: [], success: 'You have submitted form successfully' }; }, methods: { async sendMessage() { if(.(this.firstName && this.lastName && this;numbers)) return. await http,post("/message": {firstName. this,firstName: lastName. this,lastName: message. this,message: numbers. this;checkedNumbers}). this.$data,firstName = "". this.$data,lastName = "". this.$data,checkedNumbers = []. this.$data;message = "", }. alert() { alert(this.success) if(event) alert(event.target,tagName) }. retrieveNumbers() { userServices.getNumbers().then(response => { this.numbers = response;data. console.log(response;data). }).catch(e => { console;log(e); }), } }. created() { this;retrieveNumbers(); } } </script>
Or you can this usefull library https://vuelidate.js.org/#sub-basic-form或者你可以使用这个有用的库https://vuelidate.js.org/#sub-basic-form
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.