When attempting to use the if-else function, I noticed that it behaves as expected when there is an empty field (it will focus on the input first) or if there is a value in the input, then the form can be submitted. However, when I tried to enter some text into the input and then remove it, the if-else function no longer works the same way. How should I proceed?
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8a899988959a85bcced284">[email protected]</a>/dist/vuetify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45232a2b3105766b3d">[email protected]</a>/css/materialdesignicons.min.css" />
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88eae7e7fcfbfcfae9f8a5fefdedc8baa6b8a6b8a5faeba6b9b9">[email protected]</a>/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0b110e110c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<b-form @submit="onSubmit">
<b-row>
<b-col>
<v-combobox v-model="answer.type_a" :items="type_a" label="a" multiple ref="type_a">
</v-combobox>
</b-col>
<b-col>
<v-combobox v-model="answer.type_b" :items="type_b" label="b" multiple ref="type_b">
</v-combobox>
</b-col>
</b-row>
<v-btn type="submit" color="primary">Submit</v-btn>
</b-form>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b0d0e1e3b495503">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64121101100d021d24564a1c">[email protected]</a>/dist/vuetify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9292898e898f9c8dd08b8898bdcfd3cdd3cdd08f9ed3cccc">[email protected]</a>/dist/bootstrap-vue.min.js"></script>
</body>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
type_a: ["a", "b"],
type_b: ["c","d"],
answer: {
type_a: "",
type_b: "",
},
}),
methods: {
focusInput: function(inputRef) {
this.$refs[inputRef].focus();
},
onSubmit(evt) {
evt.preventDefault();
if (this.answer.type_a !== "" && this.answer.type_b !== "") {
axios.post("/", this.answer)
.then(() => {
console.log("SUCCESS!!");
})
.catch(() => {
alert("FAILURE!!");
})
} else {
if (!this.answer.type_a) {
this.focusInput("type_a");
return ;
}
if (!this.answer.type_b) {
this.focusInput("type_b");
return ;
}
// return true;
}
},
}
})
</script>
</html>In this basic HTML snippet, the desired functionality is that upon submitting the form, if any of the fields are empty, the form should focus on that specific input field. If there is a value in all inputs, the form submission should be allowed.
<form>
<input type="text" name="username" required>
<input type="text" name="password" required>
<input type="submit">
</form>