Form-Validierung

1
2  // Form validation
3  <form className="row g-3 needs-validation" noValidate>
4    <div className="col-md-4">
5      <label htmlFor="validationCustom01" className="form-label">
6        First name
7      </label>
8      <input
9        type="text"
10        className="form-control"
11        id="validationCustom01"
12        required
13      />
14      <div id="emailHelp" className="form-text">
15        We'll never share your email with anyone else.
16      </div>
17      <div className="invalid-feedback">Please add your first name!</div>
18    </div>
19    <div className="col-md-4">
20      <label htmlFor="validationCustom02" className="form-label">
21        Last name
22      </label>
23      <input
24        type="text"
25        className="form-control"
26        id="validationCustom02"
27        required
28      />
29      <div className="valid-feedback">Looks good!</div>
30    </div>
31    <div className="col-md-4">
32      <label htmlFor="validationCustomUsername" className="form-label">
33        Username
34      </label>
35      <div className="input-group has-validation">
36        <span className="input-group-text" id="inputGroupPrepend">
37          @
38        </span>
39        <input
40          type="text"
41          className="form-control"
42          id="validationCustomUsername"
43          aria-describedby="inputGroupPrepend"
44          required
45        />
46        <div className="invalid-feedback">Please choose a username.</div>
47      </div>
48    </div>
49    <div className="col-md-6">
50      <label htmlFor="validationCustom03" className="form-label">
51        City
52      </label>
53      <input
54        type="text"
55        className="form-control"
56        id="validationCustom03"
57        required
58      />
59      <div className="invalid-feedback">Please provide a valid city.</div>
60    </div>
61    <div className="col-md-3">
62      <label htmlFor="validationCustom04" className="form-label">
63        State
64      </label>
65      <select className="form-select" id="validationCustom04" required>
66        <option defaultValue="" disabled>
67          Choose...
68        </option>
69        <option>A</option>
70        <option>B</option>
71        <option>C</option>
72      </select>
73      <div className="invalid-feedback">Please select a valid state.</div>
74    </div>
75    <div className="col-md-3">
76      <label htmlFor="validationCustom05" className="form-label">
77        Zip
78      </label>
79      <input
80        type="text"
81        className="form-control"
82        id="validationCustom05"
83        required
84      />
85      <div className="invalid-feedback">Please provide a valid zip.</div>
86    </div>
87    <div className="col-12">
88      <div className="form-check">
89        <input
90          className="form-check-input"
91          type="checkbox"
92          value=""
93          id="invalidCheck"
94          required
95        />
96        <label className="form-check-label" htmlFor="invalidCheck">
97          Agree to terms and conditions
98        </label>
99        <div className="invalid-feedback">
100          You must agree before submitting.
101        </div>
102      </div>
103      <div className="form-check mb-3">
104        <input
105          type="checkbox"
106          className="form-check-input"
107          id="validationFormCheck1"
108          required
109        />
110        <label className="form-check-label" htmlFor="validationFormCheck1">
111          Check this checkbox
112        </label>
113        <div className="invalid-feedback">
114          Example invalid feedback text
115        </div>
116      </div>
117
118      <div className="form-check">
119        <input
120          type="radio"
121          className="form-check-input"
122          id="validationFormCheck2"
123          name="radio-stacked"
124          required
125        />
126        <label className="form-check-label" htmlFor="validationFormCheck2">
127          Toggle this radio
128        </label>
129      </div>
130      <div className="form-check mb-3">
131        <input
132          type="radio"
133          className="form-check-input"
134          id="validationFormCheck3"
135          name="radio-stacked"
136          required
137        />
138        <label className="form-check-label" htmlFor="validationFormCheck3">
139          Or toggle this other radio
140        </label>
141        <div className="invalid-feedback">
142          More example invalid feedback text
143        </div>
144      </div>
145      <div className="form-check form-switch">
146        <input
147          className="form-check-input"
148          type="checkbox"
149          id="flexSwitchCheckDefault"
150          required
151        />
152        <label
153          className="form-check-label"
154          htmlFor="flexSwitchCheckDefault"
155        >
156          Default switch checkbox input
157        </label>
158      </div>
159      <div className="form-check form-switch">
160        <input
161          className="form-check-input"
162          type="checkbox"
163          id="flexSwitchCheckChecked"
164          checked
165        />
166        <label
167          className="form-check-label"
168          htmlFor="flexSwitchCheckChecked"
169        >
170          Checked switch checkbox input
171        </label>
172      </div>
173    </div>
174    <div className="col-md-6">
175      <div className="form-floating mb-3">
176        <input
177          type="email"
178          className="form-control"
179          id="floatingInput3"
180          placeholder="name@example.com"
181          required
182        />
183        <label htmlFor="floatingInput3">Email address</label>
184        <div className="valid-feedback">Looks good!!</div>
185        <div className="invalid-feedback">
186          Please enter a password. Min. 5 characters required.
187        </div>
188      </div>
189    </div>
190  <div className="col-md-6">
191    <div className="form-floating">
192      <input
193        type="password"
194        className="form-control"
195        id="floatingPassword"
196        placeholder="Password"
197        autoComplete="on"
198        required
199      />
200      <label htmlFor="floatingPassword">Password</label>
201      <div className="valid-feedback">Looks good!!</div>
202      <div className="invalid-feedback">
203        Please enter a password. Min. 5 characters required.
204      </div>
205    </div>
206  </div>
207  <div className="mb-3">
208    <label htmlFor="exampleFormControlTextarea1" className="form-label">
209      Example textarea
210    </label>
211    <textarea
212      className="form-control"
213      id="exampleFormControlTextarea1"
214      rows="3"
215      required
216    ></textarea>
217  </div>
218  <div className="col-12">
219    <button
220      id="standard-form-submit"
221      className="btn btn-secondary me-2"
222      type="submit"
223    >
224      Submit form
225    </button>
226    <button id="resetForm" className="btn btn-light" type="reset">
227      Reset form
228    </button>
229  </div>
230</form>
231  

1
2  // Form validation - Javascript example code
3  
4  (function () {
5    'use strict';
6
7    // Fetch all the forms we want to apply custom Bootstrap validation styles to
8    var forms = document.querySelectorAll('.needs-validation');
9
10    // Loop over them and prevent submission
11    Array.prototype.slice.call(forms).forEach(function (form) {
12      form.addEventListener(
13        'submit',
14        function (event) {
15          if (!form.checkValidity()) {
16            event.preventDefault();
17            event.stopPropagation();
18          }
19
20          form.classList.add('was-validated');
21        },
22        false
23      );
24    });
25  })();  
26