You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
4.6 KiB
99 lines
4.6 KiB
<template> |
|
<div > |
|
<ClientOnly> |
|
<MDBCard> |
|
<MDBCardBody> |
|
<MDBCardTitle>Login</MDBCardTitle> |
|
<MDBCardText> |
|
|
|
<MDBRow tag="form" class="g-3 needs-validation" novalidate @submit.prevent="checkForm"> |
|
<MDBCol md="4"> |
|
<MDBInput |
|
label="First name" |
|
v-model="input1" |
|
invalidFeedback="Please provide your first name" |
|
validFeedback="Looks good!" |
|
required |
|
/> |
|
</MDBCol> |
|
<MDBCol md="4"> |
|
<MDBInput |
|
label="Last name" |
|
v-model="input2" |
|
invalidFeedback="Please provide your last name" |
|
validFeedback="Looks good!" |
|
required |
|
/> |
|
</MDBCol> |
|
<MDBCol md="4"> |
|
<MDBInput |
|
inputGroup |
|
aria-label="Username" |
|
aria-describedby="basic-addon1" |
|
placeholder="Username" |
|
v-model="input3" |
|
invalidFeedback="Please choose a username." |
|
validFeedback="Looks good!" |
|
required |
|
> |
|
<template v-slot:prepend> |
|
<span class="input-group-text" id="basic-addon1">@</span> |
|
</template></MDBInput |
|
> |
|
</MDBCol> |
|
<MDBCol md="6"> |
|
<MDBInput |
|
label="City" |
|
v-model="input4" |
|
invalidFeedback="Please provide a valid city." |
|
validFeedback="Looks good!" |
|
required |
|
/> |
|
</MDBCol> |
|
<MDBCol md="6"> |
|
<MDBInput |
|
label="Zip" |
|
v-model="input5" |
|
invalidFeedback="Please provide a valid zip." |
|
validFeedback="Looks good!" |
|
required |
|
/> |
|
</MDBCol> |
|
<MDBCol col="12"> |
|
<MDBCheckbox |
|
label="Agree to terms and conditions" |
|
v-model="checkbox1" |
|
invalidFeedback="You must agree before submitting." |
|
validFeedback="Looks good!" |
|
required |
|
/> |
|
</MDBCol> |
|
<MDBCol col="12"> |
|
<MDBBtn color="primary" type="submit">Submit form</MDBBtn> |
|
</MDBCol> |
|
</MDBRow> |
|
|
|
</MDBCardText> |
|
</MDBCardBody> |
|
</MDBCard> |
|
</ClientOnly> |
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow } from "mdb-vue-ui-kit"; |
|
import { ref } from "vue"; |
|
|
|
const checkForm = (event: Event) => { |
|
event.target.classList.add("was-validated"); |
|
}; |
|
const input1 = ref("Mark"); |
|
const input2 = ref("Otto"); |
|
const input3 = ref(""); |
|
const input4 = ref(""); |
|
const input5 = ref(""); |
|
const checkbox1 = ref(false); |
|
</script> |