---
title: "HTML registration form with JS validation"
subject: "Web Technology"
chapter: 4
key: "semester_7/web_technology:registration-form-js-validation"
source: https://www.bctengineer.com/q/semester_7/web_technology/registration-form-js-validation
site: BCT Engineering
---
# HTML registration form with JS validation
Web Technology · Chapter 4: Client-side scripting
- Asked in: 2074 Asoj, 10 marks
- Video: [JavaScript Form Validation](https://www.youtube.com/watch?v=In0nB0ABaUk) — Web Dev Simplified
- Answer checked by Claude Opus 5.5 (high effort) on 2026-10-14
- Page: https://www.bctengineer.com/q/semester_7/web_technology/registration-form-js-validation
- Whole chapter: https://www.bctengineer.com/md/semester_7/web_technology/chapter-4
## Question
Design a HTML User Registration form as below.
[Figure: "User Registration Form" with fields Name (text box), Email (text box), Gender (radio buttons Male / Female), Phone (text box), Interest (large text area) and a Register button]
Validate the registration form using JavaScript. Validation should be as:
i. All fields are compulsory.
ii. Name should be all characters
iii. Phone should be all numbers
iv. Validate email format
v. Interest should be in between 20 to 1000 characters.
## Short answer
Validation uses onsubmit returning false to cancel. It checks all fields compulsory, name letters only, phone digits only, email format, and interest length 20-1000 characters.
## Answer
Assumptions: the form is named `regForm`; Name may contain only letters (and spaces); Phone may contain only digits; Interest must contain 20 to 1000 characters.
```html
User Registration
```
#### Explanation
- `onsubmit="return validateForm()"` runs validation first; returning `false` cancels submission.
- `f.gender.value` returns the checked radio's value (empty if none).
- `f.name`, `f.email`, `f.phone` and `f.interest` refer to the form controls with those `name` attributes (a named control takes priority over the form's own property of the same name).
- Regular expressions check each rule: `/^[A-Za-z ]+$/` letters only, `/^[0-9]+$/` digits only, and a basic email pattern `text@text.text`. If the phone must also be exactly 10 digits, use `/^[0-9]{10}$/`.
- `interest.length` is compared with 20 and 1000.
- The server must validate again, because client-side checks can be bypassed.
## Check yourself
The answer's key points as multiple-choice questions, with the correct option and why.
1. How does onsubmit="return validateForm()" stop an invalid form from being sent?
A. The browser deletes the invalid fields
B. The server rejects it before it is sent
C. alert() automatically stops the form
D. validateForm returns false, which cancels the submission
Answer: D. Returning false from the onsubmit handler cancels the submission; returning true lets it go ahead. (Key point: Blocking submission)
2. How does the script detect that no gender radio button was selected?
A. f.gender.length equals 0
B. f.gender.value is an empty string
C. f.gender is null
D. The browser blocks the form itself
Answer: B. f.gender.value returns the checked radio's value, or empty if none is selected, so it is compared with "". (Key point: Radio gender check)
3. What condition marks the Interest field invalid?
A. interest.length < 20 || interest.length > 1000
B. interest.length == 20
C. interest == "" only
D. interest.length > 20 && interest.length < 1000
Answer: A. Valid length is 20 to 1000, so it is invalid if shorter than 20 or longer than 1000. (Key point: Interest length)
## Related in Web Technology
- [HTML5 IOE examination registration form](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Ahtml5-registration-form) — Web Technology, chapter 2
- [CSS box model margin and padding](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Acss-box-model-layout) — Web Technology, chapter 2
## Related in other subjects
- [Chi-square: smokers, gender and starting age](https://www.bctengineer.com/question.md?key=semester_5%2Fprobability_and_statistics%3Achi-square-smokers-gender-age) — Probability and Statistics, chapter 7
- [Justify: trending method for large area forecast](https://www.bctengineer.com/question.md?key=semester_8%2Ftransmission_and_distribution_system_design%3Ajustify-trending-large-area-forecast) — Transmission and Distribution System Design, chapter 6
- [Design wind pressure, large openings, 100 yr](https://www.bctengineer.com/question.md?key=semester_6%2Fdesign_of_steel_and_timber_structure%3Awind-large-openings-hill-160m) — Design of Steel and Timber Structure, chapter 8
- [Multimedia user interface design process](https://www.bctengineer.com/question.md?key=semester_8%2Fmultimedia_system%3Aui-design-process) — Multimedia System, chapter 6, asked 2×