Assignment Forms Validation & Custom Controls

 Assignment: Forms – Validation & Custom Controls.

Create a Responsive Registration Form with Validation & Custom Controls.

 Assignment Description

Design and develop a Registration Form using Bootstrap.

The form must include built-in Bootstrap validation, custom-styled controls, and JavaScript validation logic.

 Tasks

🔹 Task 1: Form Layout (Bootstrap)

Create a responsive form using Bootstrap grid system with the following fields:

Full Name

Email Address

Password

Confirm Password

Mobile Number

Gender (Radio Buttons)

Skills (Checkboxes – minimum 3)

Country (Dropdown)

Agree to Terms & Conditions (Checkbox)

Submit Button

Reset Button

✔ Use Bootstrap classes like:

form-control, form-check, form-check-input, form-label, btn

🔹 Task 2: Form Validation

Apply the following validation rules:

Full Name → Required, minimum 3 characters

Email → Must be valid email format

Password → Minimum 8 characters

Confirm Password → Must match password

Mobile Number → Exactly 10 digits

Gender → Required

Skills → At least one must be selected

Country → Must select a valid option

Terms & Conditions → Must be checked

✔ Use:

Bootstrap validation classes (is-valid, is-invalid)

HTML5 validation attributes

JavaScript validation for at least 3 fields

🔹 Task 3: Custom Controls

Customize the following using Bootstrap & CSS:

Styled radio buttons

Styled checkboxes

Custom submit button

Input focus effects

Validation error messages

✔ Error messages must be shown using:

.invalid-feedback

.valid-feedback

______________________________________________

📂 Submission Files

Students must submit:

                   👩‍🎓

index.html

style.css (optional customization)

script.js

Screenshots:

Empty form

Validation errors

Successful submission

📊 Marks Distribution

Criteria

Marks

Bootstrap Form Layout

20

Validation Rules

30

Custom Controls Styling

20

JavaScript Logic

20

UI & Responsiveness

10

Total

100

Complete This Assignments And Send It To me