Skip to content

Commit ae9de57

Browse files
DecentCodersDecentCoders
committed
Browser validates
0 parents  commit ae9de57

1 file changed

Lines changed: 199 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
7+
8+
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
9+
<title>setup test</title>
10+
</head>
11+
<body>
12+
<div id="app" class="container d-flex justify-content-center align-items-center vh-100">
13+
<form class="row g-3 needs-validation w-75" @submit="validateForm">
14+
<div class="col-md-4">
15+
<label for="validationCustom01" class="form-label">First name</label>
16+
<input type="text" class="form-control" :class="{'is-invalid':!firstNameValid,'is-valid':firstNameValid}" id="validationCustom01" v-model="firstName" required>
17+
<div class="valid-feedback">
18+
Looks good!
19+
</div>
20+
<div class="invalid-feedback">
21+
Please write your First Name.
22+
</div>
23+
</div>
24+
<div class="col-md-4">
25+
<label for="validationCustom02" class="form-label">Last name</label>
26+
<input type="text" class="form-control" :class="{'is-invalid':!lastNameValid,'is-valid':lastNameValid}" id="validationCustom02" v-model="lastName" required>
27+
<div class="valid-feedback">
28+
Looks good!
29+
</div>
30+
<div class="invalid-feedback">
31+
Please write your Last Name.
32+
</div>
33+
</div>
34+
<div class="col-md-4">
35+
<label for="validationCustomUsername" class="form-label">Username</label>
36+
<div class="input-group has-validation">
37+
<span class="input-group-text" id="inputGroupPrepend">@</span>
38+
<input type="text" class="form-control" :class="{'is-invalid':!userNameValid,'is-valid':userNameValid}" id="validationCustomUsername" aria-describedby="inputGroupPrepend" v-model="username" required>
39+
<div class="valid-feedback">
40+
Looks good!
41+
</div>
42+
<div class="invalid-feedback">
43+
Please choose a username.
44+
</div>
45+
</div>
46+
</div>
47+
<div class="col-md-6">
48+
<label for="validationCustom03" class="form-label">City</label>
49+
<input type="text" class="form-control" :class="{'is-invalid':!cityNameValid,'is-valid':cityNameValid}" v-model="city" id="validationCustom03" required>
50+
<div class="invalid-feedback">
51+
Please provide a valid city.
52+
</div>
53+
</div>
54+
<div class="col-md-3">
55+
<label for="validationCustom04" class="form-label">State</label>
56+
<select class="form-select" :class="{'is-invalid':!stateNameValid,'is-valid':stateNameValid}" v-model='state' id="validationCustom04" required>
57+
<option selected disabled value="">Choose...</option>
58+
<option>Dhaka</option>
59+
<option>Barisal</option>
60+
<option>Citagaon</option>
61+
<option>Sylet</option>
62+
<option>Rangpur</option>
63+
</select>
64+
<div class="invalid-feedback">
65+
Please select a valid state.
66+
</div>
67+
</div>
68+
<div class="col-md-3">
69+
<label for="validationCustom05" class="form-label">Zip</label>
70+
<input
71+
type="text"
72+
v-model="zip"
73+
@input="zip = zip.replace(/\D/g, '')"
74+
:class="{'is-invalid':!zipNameValid,'is-valid':zipNameValid}"
75+
class="form-control"
76+
id="validationCustom05"
77+
required
78+
>
79+
<div class="invalid-feedback">
80+
Please provide a valid zip.
81+
</div>
82+
</div>
83+
<div class="col-12">
84+
<div class="form-check">
85+
<input class="form-check-input" :class="{'is-invalid': !terms,'is-valid': terms} " type="checkbox" value="" v-model="terms" id="invalidCheck" required>
86+
<!-- :class="{'is-invalid': wasValidated && !terms, 'is-valid': wasValidated && terms}" -->
87+
<label class="form-check-label" for="invalidCheck">
88+
Agree to terms and conditions
89+
</label>
90+
<div class="invalid-feedback" id="invalidCheck">
91+
You must agree before submitting.
92+
</div>
93+
</div>
94+
</div>
95+
<div class="col-12">
96+
<button class="btn btn-primary" type="submit" @submit="validateForm(event)">Submit form</button>
97+
</div>
98+
</form>
99+
</div>
100+
<script>
101+
const { createApp, ref, watch } = Vue;
102+
createApp({
103+
setup(){
104+
let firstName = ref('');
105+
let lastName = ref('');
106+
let username = ref('');
107+
let city = ref('');
108+
let state = ref('');
109+
let zip = ref('');
110+
let terms = ref(false);
111+
let firstNameValid = ref();
112+
let lastNameValid = ref();
113+
let userNameValid = ref();
114+
let cityNameValid = ref();
115+
let stateNameValid = ref();
116+
let zipNameValid = ref();
117+
watch([firstName] ,(newValue, oldValue) =>{
118+
if(newValue[0].length > 0){
119+
firstNameValid.value = true;
120+
}else{
121+
firstNameValid.value = false;
122+
}
123+
})
124+
watch([lastName] ,(newValue, oldValue) =>{
125+
if(newValue[0].length > 0){
126+
lastNameValid.value = true;
127+
}else{
128+
lastNameValid.value = false;
129+
}
130+
})
131+
watch([username] ,(newValue, oldValue) =>{
132+
if(newValue[0].length > 0){
133+
userNameValid.value = true;
134+
}else{
135+
userNameValid.value = false;
136+
}
137+
})
138+
watch([city] ,(newValue, oldValue) =>{
139+
if(newValue[0].length > 0){
140+
cityNameValid.value = true;
141+
}else{
142+
cityNameValid.value = false;
143+
}
144+
})
145+
watch([state] ,(newValue, oldValue) =>{
146+
if(newValue[0].length > 0){
147+
stateNameValid.value = true;
148+
}else{
149+
stateNameValid.value = false;
150+
}
151+
})
152+
watch([zip] ,(newValue, oldValue) =>{
153+
if(newValue[0].length > 0){
154+
zipNameValid.value = true;
155+
}else{
156+
zipNameValid.value = false;
157+
}
158+
})
159+
function validateForm(event) {
160+
event.preventDefault();
161+
if (firstNameValid.value && lastNameValid.value && userNameValid.value && cityNameValid.value && stateNameValid.value && zipNameValid.value && terms.value) {
162+
alert('Form submitted successfully!Thank you.'+firstName.value + ' ' + lastName.value + ', your username is ' + username.value + '. You are from ' + city.value + ', ' + state.value + ', ' + zip.value + '. You have agreed to the terms.'
163+
);
164+
console.log({
165+
firstName: firstName.value,
166+
lastName: lastName.value,
167+
username: username.value,
168+
city: city.value,
169+
state: state.value,
170+
zip: zip.value,
171+
terms: terms.value
172+
});
173+
} else {
174+
alert('Please fill out all required fields correctly.');
175+
console.log('Form validation failed');
176+
}
177+
}
178+
return {
179+
firstName,
180+
lastName,
181+
username,
182+
city,
183+
state,
184+
zip,
185+
terms,
186+
firstNameValid,
187+
lastNameValid,
188+
userNameValid,
189+
cityNameValid,
190+
stateNameValid,
191+
zipNameValid,
192+
validateForm // <-- just reference the function
193+
}
194+
}
195+
}).mount('#app');
196+
</script>
197+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
198+
</body>
199+
</html>

0 commit comments

Comments
 (0)