screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Js Radio Button Validation</h3> <p>Show Alert if Radio Button is not Selected</p> <form @submit.prevent="validateForm"> <label>Select Option:</label> <div v-for='(option,index) in options'> <input type="radio" :id="index" v-model="selectedValue" :value="option">{{option}} </div> <br><br> <button type="submit" @click="validateForm">submit</button> </form> <pre>Get Selected Value: {{selectedValue}}</pre> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { options: ['Apple', 'Google', 'Microsoft', 'Meta', 'HCL', 'Wipro', 'Tata'], selectedValue: '', } }, methods: { validateForm() { if (!this.selectedValue) { alert('please select an option'); return false; } alert('Form Submitted') return true; } } }); </script> </body> </html>