MCQs on Forms and Validation | JavaScript Intermediate
Forms are a core part of web development, and mastering form handling and validation is essential for building interactive websites. This chapter covers accessing form data, performing validation, and preventing unwanted submissions.
Working with Forms and Validation
Topic: Accessing Form Data
- How do you access the value of an input element in JavaScript?
- A)
input.value - B)
document.input - C)
input.getValue() - D)
getElementById(input)
- A)
- Which method is used to access a form element by its name?
- A)
getElementById() - B)
getElementsByTagName() - C)
getElementByName() - D)
document.forms
- A)
- How can you access the value of a radio button that is selected in a form?
- A)
document.querySelector("input[type='radio']:checked") - B)
document.getElementById("radio").checked - C)
radio.value() - D)
document.forms.radio
- A)
- What is the correct way to retrieve all form elements in a form?
- A)
document.getElementsByTagName("input") - B)
document.forms[0].elements - C)
form.getAllElements() - D)
document.getElementsByName()
- A)
- Which method is used to access the value of a checkbox input?
- A)
checkbox.checked - B)
checkbox.value - C)
checkbox.getElement() - D)
checkbox.isChecked()
- A)
- How do you access a form element with a specific ID in JavaScript?
- A)
document.getElementById("id") - B)
document.forms.id - C)
document.querySelector("#id") - D) Both A and C
- A)
- Which of these methods is used to get the values of multiple checkboxes with the same name?
- A)
document.querySelectorAll("input[name='checkboxName']") - B)
document.forms['formName'].checkboxName - C)
document.getElementByName('checkboxName') - D)
document.getElementsByTagName('input')
- A)
- What is returned when accessing
form.elements["email"].value?- A) The email input field object
- B) The text inside the email input field
- C) The name of the input field
- D) A boolean value
- How do you access a submit button value in a form?
- A)
submitButton.value - B)
submitButton.checked - C)
submitButton.getAttribute('value') - D)
submitButton.innerText
- A)
- How do you get the value of a text input field using JavaScript?
- A)
input.getValue() - B)
document.getElementById('inputID').value - C)
input.value() - D)
document.querySelector('input').getValue()
- A)
Topic: Simple Form Validation
- Which method is used to validate a required field in a form?
- A)
input.required() - B)
input.checkValidity() - C)
form.submit() - D)
input.isValid()
- How can you check if a text input field is empty using JavaScript?
- A)
input.value == "" - B)
input.value == null - C)
input.length == 0 - D)
input.isEmpty()
- Which of the following is a common way to display error messages during form validation?
- A) Use
alert()to show messages - B) Insert a
spanordivfor the message - C) Log the error in the console
- D) Display an image for the error
- How do you stop a form from submitting when validation fails?
- A)
event.preventDefault() - B)
form.stopSubmit() - C)
form.cancel() - D)
return false
- Which property is checked to see if a text input is required in HTML5?
- A)
input.required - B)
input.hasAttribute('required') - C)
input.isRequired - D)
input.isEmpty()
- What is the correct way to trigger form validation?
- A)
form.submit() - B)
form.checkValidity() - C)
form.validate() - D)
form.submitValidation()
- How can you make an input field required in HTML5?
- A)
<input required> - B)
<input isRequired="true"> - C)
<input validate="true"> - D)
<input mandatory="true">
- What method can you use to check if a form input is valid?
- A)
input.isValid() - B)
input.checkValidity() - C)
input.valueCheck() - D)
input.validate()
- Which of the following HTML attributes is used for validating email input?
- A)
email.required - B)
email.pattern - C)
type="email" - D)
email.isValid
- How do you display a message if the form is invalid?
- A)
alert("Form invalid") - B)
message.innerHTML = "Invalid" - C)
showErrorMessage() - D)
form.invalidMessage()
Topic: HTML5 Form Validation
- What does the
patternattribute in HTML5 do?
- A) Restricts the input to match a regular expression
- B) Makes the input field optional
- C) Adds a placeholder to the input field
- D) Validates a date format
- Which of the following attributes is used for validating a phone number in HTML5?
- A)
type="phone" - B)
pattern="^\d{3}-\d{3}-\d{4}$" - C)
required="true" - D)
type="text"
- Which HTML5 input type ensures that only a valid email address can be entered?
- A)
type="text" - B)
type="email" - C)
type="password" - D)
type="url"
- What does the
maxlengthattribute in HTML5 do?
- A) Limits the number of characters a user can enter
- B) Specifies the maximum width of the input box
- C) Defines the maximum length of the label text
- D) Restricts input to numeric values
- Which HTML5 input type validates that the user enters a date?
- A)
type="date" - B)
type="text" - C)
type="number" - D)
type="datetime-local"
- How can you specify that a field is required in an HTML5 form?
- A)
input:required - B)
input.required - C)
<input required> - D)
input.isRequired
- What does the
minattribute in HTML5 input fields define?
- A) The minimum number of characters allowed
- B) The minimum length of the text field
- C) The minimum value of numeric fields
- D) The minimum time allowed in a date picker
- Which of these elements is NOT validated by default in HTML5?
- A)
<input type="email"> - B)
<input type="url"> - C)
<input type="text"> - D)
<input type="number">
- What happens if a user submits an invalid form with HTML5 validation?
- A) The form is submitted with an error message
- B) The form submits without validation
- C) The browser displays a built-in validation message
- D) The user is redirected to an error page
- Which HTML5 input type is used for validating URL entries?
- A)
type="url" - B)
type="text" - C)
type="email" - D)
type="password"
Answers Table
| Qno | Answer |
|---|---|
| 1 | A) input.value |
| 2 | D) document.forms |
| 3 | A) document.querySelector("input[type='radio']:checked") |
| 4 | B) document.forms[0].elements |
| 5 | A) checkbox.checked |
| 6 | D) Both A and C |
| 7 | A) document.querySelectorAll("input[name='checkboxName']") |
| 8 | B) The text inside the email input field |
| 9 | A) submitButton.value |
| 10 | B) document.getElementById('inputID').value |
| 11 | B) input.checkValidity() |
| 12 | A) input.value == "" |
| 13 | B) Insert a span or div for the message |
| 14 | A) event.preventDefault() |
| 15 | B) input.hasAttribute('required') |
| 16 | B) form.checkValidity() |
| 17 | A) <input required> |
| 18 | B) input.checkValidity() |
| 19 | C) type="email" |
| 20 | B) message.innerHTML = "Invalid" |
| 21 | A) Restricts the input to match a regular expression |
| 22 | B) pattern="^\d{3}-\d{3}-\d{4}$" |
| 23 | B) type="email" |
| 24 | A) Limits the number of characters a user can enter |
| 25 | A) type="date" |
| 26 | C) <input required> |
| 27 | C) The minimum value of numeric fields |
| 28 | C) <input type="text"> |
| 29 | C) The browser displays a built-in validation message |
| 30 | A) type="url" |