Don't forget to hit the ⭐ if you like this repo.

JavaScript: Event & Form Validation

Set A

Please answer the following 50 multiple-choice questions to test your knowledge in Event & Form Validation. You must place your answer file in the submission folder. Within the submission/Q3/set_a folder, create a folder called your github_id.

Which method is used to attach an event handler to an HTML element in JavaScript?
- a) addEventListener()
- b) attachEvent()
- c) onEvent()
- d) eventHandler()
What is the purpose of event.preventDefault() in JavaScript?
- a) Prevent the default behavior of an event
- b) Stop the propagation of an event
- c) Trigger the default behavior of an event
- d) Remove an event handler
Which event occurs when the user clicks on an HTML element?
- a) click
- b) mouseover
- c) keydown
- d) submit
How can you access the target element of an event in JavaScript?
- a) event.target
- b) event.element
- c) event.targetElement
- d) event.currentTarget
Which method is used to remove an event handler from an HTML element in JavaScript?
- a) removeEventListener()
- b) detachEvent()
- c) offEvent()
- d) removeHandler()
What is event propagation in JavaScript?
- a) The order in which events are handled when multiple elements are nested inside each other
- b) The process of capturing events and executing event handlers
- c) The triggering of multiple events simultaneously
- d) The assignment of event handlers to HTML elements
Which property is used to prevent event propagation in JavaScript?
- a) event.stopPropagation()
- b) event.preventDefault()
- c) event.cancelBubble()
- d) event.stopImmediatePropagation()
What is form validation in JavaScript?
- a) The process of checking user input in a web form to ensure it meets certain criteria
- b) The act of styling HTML forms using CSS
- c) The automatic submission of a form when all fields are filled
- d) The process of dynamically updating form elements based on user actions
How can you access the value of an input field in JavaScript?
- a) document.getElementById("myField").value
- b) document.getElementByName("myField").value
- c) document.getElementByClass("myField").value
- d) document.getElementByTag("input").value
Which method is used to add a custom error message to a form field in JavaScript?
- a) setCustomValidity()
- b) addError()
- c) displayError()
- d) setError()
What is the purpose of form validation in JavaScript?
- a) Ensure that user input meets specific requirements or constraints
- b) Validate the structure of HTML forms
- c) Prevent form submission to the server
- d) Display error messages for all form fields
Which event occurs when the user interacts with an input field in a form?
- a) input
- b) change
- c) focus
- d) submit
How can you check if a checkbox is checked in JavaScript?
- a) element.checked
- b) element.value
- c) element.selected
- d) element.active
What is the purpose of the pattern attribute in an HTML input field?
- a) Specify a regular expression pattern for validating input
- b) Define a placeholder text for the input field
- c) Restrict the input to a specific set of values
- d) Set the maximum length of the input field
Which method is used to reset a form to its initial state in JavaScript?
- a) reset()
- b) clearForm()
- c) emptyForm()
- d) removeForm()
What is the purpose of the required attribute in an HTML input field?
- a) Indicate that the input field must be filled before submitting the form
- b) Specify a regular expression pattern for validating input
- c) Define a placeholder text for the input field
- d) Restrict the input to a specific set of values
How can you display an error message next to a form field in JavaScript?
- a) Update the innerHTML property of a specific element
- b) Use the alert() function to display a pop-up message
- c) Append an error message to the value property of the form field
- d) Set the display property of the form field to "error"
Which event occurs when a user starts typing in an input field?
- a) input
- b) change
- c) focus
- d) keydown
How can you check if an input field is empty in JavaScript?
- a) element.value === ""
- b) element.empty()
- c) element.isNull()
- d) element.isUndefined()
What is the purpose of the maxlength attribute in an HTML input field?
- a) Specify the maximum length of the input field
- b) Set a minimum length for the input field
- c) Restrict the input to numeric values only
- d) Define a placeholder text for the input field
Which event occurs when a user moves the mouse over an HTML element?
- a) mouseover
- b) mouseenter
- c) mousemove
- d) mousein
How can you check if a radio button is selected in JavaScript?
- a) element.checked
- b) element.selected
- c) element.value
- d) element.active
What is the purpose of the disabled attribute in an HTML form field?
- a) Prevent the user from interacting with the form field
- b) Specify a default value for the form field
- c) Indicate that the form field is required
- d) Restrict the input to a specific set of values
Which method is used to focus on an HTML element in JavaScript?
- a) focus()
- b) setFocus()
- c) activate()
- d) select()
What is the purpose of the autocomplete attribute in an HTML input field?
- a) Specify whether the browser should provide autocomplete suggestions
- b) Define a placeholder text for the input field
- c) Restrict the input to a specific set of values
- d) Set the maximum length of the input field
Which event occurs when the user presses a key on the keyboard?
- a) keydown
- b) keypress
- c) keyup
- d) keypress
How can you dynamically update the options of a select element in JavaScript?
- a) Update the innerHTML property of the select element
- b) Use the setAttribute() method to modify the options
- c) Append new options to the select element using the appendChild() method
- d) Replace the select element with a new one containing the updated options
What is the purpose of the blur event in JavaScript?
- a) Occurs when an element loses focus
- b) Occurs when an element gains focus
- c) Occurs when the mouse is clicked on an element
- d) Occurs when the page finishes loading
How can you check if an input field contains a numeric value in JavaScript?
- a) Use the isNaN() function to check if the value is not a number
- b) Use the isNumeric() function to check if the value is a number
- c) Compare the value to a regular expression pattern for numeric values
- d) Convert the value to a number using the parseInt() or parseFloat() functions
What is the purpose of the focus event in JavaScript?
- a) Occurs when an element gains focus
- b) Occurs when an element loses focus
- c) Occurs when the mouse is clicked on an element
- d) Occurs when the page finishes loading
How can you dynamically disable a form field in JavaScript?
- a) Set the disabled property of the form field to true
- b) Use the setAttribute() method to disable the form field
- c) Add the disabled class to the form field's classList
- d) Remove the form field from the DOM structure
What is the purpose of the keyup event in JavaScript?
- a) Occurs when a key is released on the keyboard
- b) Occurs when a key is pressed on the keyboard
- c) Occurs when a key is held down on the keyboard
- d) Occurs when a key is typed on the keyboard
How can you dynamically set the value of an input field in JavaScript?
- a) Set the value property of the input field to the desired value
- b) Use the setAttribute() method to set the value of the input field
- c) Append the value to the innerHTML property of the input field
- d) Replace the input field with a new one containing the desired value
What is the purpose of the change event in JavaScript?
- a) Occurs when the value of an input field changes
- b) Occurs when an element gains focus
- c) Occurs when an element loses focus
- d) Occurs when the page finishes loading
How can you check if an input field contains a valid URL in JavaScript?
- a) Compare the value to a regular expression pattern for URL validation
- b) Use the isURL() function to check if the value is a valid URL
- c) Use the validateURL() method provided by the browser
- d) Check if the value starts with "http://" or "https://"
What is the purpose of the submit event in JavaScript?
- a) Occurs when a form is submitted
- b) Occurs when an element gains focus
- c) Occurs when an element loses focus
- d) Occurs when the page finishes loading
How can you dynamically add a new input field to a form in JavaScript?
- a) Create a new input element using the document.createElement() method
- b) Use the setAttribute() method to add a new attribute to an existing input field
- c) Append the input field to the innerHTML property of the form element
- d) Replace the form element with a new one containing the additional input field
What is the purpose of the reset event in JavaScript?
- a) Occurs when a form is reset to its initial state
- b) Occurs when an element gains focus
- c) Occurs when an element loses focus
- d) Occurs when the page finishes loading
How can you dynamically remove an element from the DOM structure in JavaScript?
- a) Use the removeChild() method to remove the element from its parent
- b) Set the display property of the element to none
- c) Remove the element's innerHTML content
- d) Replace the element with an empty placeholder element
What is the purpose of the mouseenter event in JavaScript?
- a) Occurs when the mouse enters an element
- b) Occurs when the mouse leaves an element
- c) Occurs when the mouse moves inside an element
- d) Occurs when the page finishes loading
How can you dynamically update the text content of an HTML element in JavaScript?
- a) Set the textContent property of the element to the desired text
- b) Use the setAttribute() method to modify the text content of the element
- c) Append the text to the innerHTML property of the element
- d) Replace the element with a new one containing the updated text content
What is the purpose of the mouseleave event in JavaScript?
- a) Occurs when the mouse leaves an element
- b) Occurs when the mouse enters an element
- c) Occurs when the mouse moves inside an element
- d) Occurs when the page finishes loading
How can you dynamically change the style of an HTML element in JavaScript?
- a) Set the style property of the element to the desired style rules
- b) Use the setAttribute() method to modify the style attribute of the element
- c) Append the style rules to the innerHTML property of the element
- d) Replace the element with a new one containing the updated style
What is the purpose of the mouseout event in JavaScript?
- a) Occurs when the mouse leaves an element
- b) Occurs when the mouse enters an element
- c) Occurs when the mouse moves inside an element
- d) Occurs when the page finishes loading
How can you dynamically add a CSS class to an HTML element in JavaScript?
- a) Use the classList.add() method to add the class to the element
- b) Set the className property of the element to the desired class
- c) Use the setAttribute() method to add a class attribute to the element
- d) Replace the element with a new one containing the additional class
What is the purpose of the mousemove event in JavaScript?
- a) Occurs when the mouse moves inside an element
- b) Occurs when the mouse enters an element
- c) Occurs when the mouse leaves an element
- d) Occurs when the page finishes loading
How can you dynamically remove a CSS class from an HTML element in JavaScript?
- a) Use the classList.remove() method to remove the class from the element
- b) Set the className property of the element to an empty string
- c) Use the setAttribute() method to remove the class attribute from the element
- d) Replace the element with a new one containing the updated class list
What is the purpose of the keydown event in JavaScript?
- a) Occurs when a key is pressed on the keyboard
- b) Occurs when a key is released on the keyboard
- c) Occurs when a key is held down on the keyboard
- d) Occurs when a key is typed on the keyboard
How can you dynamically change the source attribute of an image element in JavaScript?
- a) Set the src attribute of the image element to the desired source URL
- b) Use the setAttribute() method to modify the source attribute of the image element
- c) Append the source URL to the innerHTML property of the image element
- d) Replace the image element with a new one containing the updated source attribute
What is the purpose of the keyup event in JavaScript?
- a) Occurs when a key is released on the keyboard
- b) Occurs when a key is pressed on the keyboard
- c) Occurs when a key is held down on the keyboard
- d) Occurs when a key is typed on the keyboard

Set B

Please answer the following 50 multiple-choice questions to test your knowledge in Event & Form Validation. You must place your answer file in the submission folder. Within the submission/Q3/set_b folder, create a folder called your github_id.

Which method is used to attach an event handler to an HTML element in JavaScript?
- a) addEventListener
- b) attachEvent
- c) onEvent
- d) bindEvent
What is the output of the following code snippet?
```
document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked');
});
```
- a) It attaches a click event handler to the element with the ID myButton.
- b) It logs 'Button clicked' to the console when the button is clicked.
- c) Both a) and b) are correct.
- d) None of the above.
How do you prevent the default behavior of an HTML element's event in JavaScript?
- a) event.defaultPrevented = true;
- b) event.preventDefault();
- c) event.stopDefault();
- d) event.prevent();
What is the purpose of the event.stopPropagation() method in JavaScript?
- a) To prevent event bubbling.
- b) To cancel the event.
- c) To stop the event from being captured.
- d) To stop the event from propagating to parent elements.
What is the output of the following code snippet?
```
document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  console.log(this.href);
});
```
- a) It prevents the default behavior of the link and logs the value of the href attribute.
- b) It prevents the default behavior of the link.
- c) It logs the value of the href attribute when the link is clicked.
- d) None of the above.
How do you attach multiple event handlers to an HTML element in JavaScript?
- a) Using the attachEvents method.
- b) Using the addEventListener method multiple times.
- c) By passing an array of event handlers to the addEventListener method.
- d) Only one event handler can be attached to an HTML element.
What is the output of the following code snippet?
```
document.getElementById('myInput').addEventListener('keydown', function(event) {
  console.log(event.key);
});
```
- a) It logs the value of the key that was pressed.
- b) It logs the ASCII code of the key that was pressed.
- c) It logs the event object.
- d) None of the above.
How do you remove an event handler from an HTML element in JavaScript?
- a) removeEventListener
- b) detachEvent
- c) unbindEvent
- d) offEvent
What is the purpose of the event.target property in JavaScript?
- a) To access the element on which the event was triggered.
- b) To access the parent element of the event target.
- c) To access the next sibling element of the event target.
- d) To access the previous sibling element of the event target.
What is the output of the following code snippet?
```
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Form submitted');
});
```
- a) It prevents the default behavior of the form submission and logs 'Form submitted' to the console.
- b) It prevents the default behavior of the form submission.
- c) It logs 'Form submitted' to the console when the form is submitted.
- d) None of the above.
How do you validate a required input field in a form using JavaScript?
- a) Check if the input field's value is empty.
- b) Check if the input field's value is null.
- c) Check if the input field's value is undefined.
- d) All of the above.
What is the output of the following code snippet?
```
var emailInput = document.getElementById('email');
emailInput.addEventListener('blur', function(event) {
  var value = event.target.value;
  if (!value.includes('@')) {
    event.target.classList.add('error');
    console.log('Invalid email address');
  }
});
```
- a) It adds an error class to the email input if the value does not contain an '@' symbol and logs 'Invalid email address' to the console.
- b) It adds an error class to the email input if the value does not contain an '@' symbol.
- c) It logs 'Invalid email address' to the console when the email input loses focus.
- d) None of the above.
How do you dynamically update the contents of a select element in JavaScript?
- a) Manipulate the options array of the select element.
- b) Use the appendChild method to add new options.
- c) Use the innerHTML property to update the HTML markup of the select element.
- d) All of the above.
What is the purpose of the input event in JavaScript?
- a) To detect changes to an input element's value.
- b) To detect when an input element gains focus.
- c) To detect when an input element loses focus.
- d) To detect when a key is pressed inside an input element.
What is the output of the following code snippet?
```
var checkbox = document.getElementById('myCheckbox');
checkbox.addEventListener('change', function(event) {
  console.log(event.target.checked);
});
```
- a) It logs true or false based on whether the checkbox is checked or not.
- b) It logs the value of the checkbox element.
- c) It logs true when the checkbox is checked and false when it is unchecked.
- d) None of the above.
How do you prevent form submission if the input fields are not valid using JavaScript?
- a) Use the event.preventDefault() method inside the form's submit event handler.
- b) Set the form's onsubmit attribute to return false.
- c) Both a) and b) are correct.
- d) None of the above.
What is the purpose of the focus event in JavaScript?
- a) To detect when an element gains focus.
- b) To detect when an element loses focus.
- c) To detect changes to an input element's value.
- d) To detect when a key is pressed inside an input element.
What is the output of the following code snippet?
```
var passwordInput = document.getElementById('password');
passwordInput.addEventListener('input', function(event) {
  var value = event.target.value;
  if (value.length < 8) {
    event.target.setCustomValidity('Password must be at least 8 characters long.');
  } else {
    event.target.setCustomValidity('');
  }
});
```
- a) It sets a custom validation message on the password input if the password is less than 8 characters long.
- b) It clears the custom validation message on the password input if the password is at least 8 characters long.
- c) It sets a custom validity state on the password input based on its length.
- d) None of the above.
How do you trigger an event programmatically using JavaScript?
- a) Use the dispatchEvent method.
- b) Use the triggerEvent method.
- c) Use the fireEvent method.
- d) Use the emitEvent method.
What is the purpose of the keyup event in JavaScript?
- a) To detect when a key is released after being pressed inside an input element.
- b) To detect when a key is pressed inside an input element.
- c) To detect when an element gains focus.
- d) To detect when an element loses focus.
What is the output of the following code snippet?
```
var form = document.getElementById('myForm');
form.addEventListener('invalid', function(event) {
  event.preventDefault();
  console.log('Form is invalid');
}, true);
```
- a) It prevents the default behavior of the form submission and logs 'Form is invalid' to the console.
- b) It logs 'Form is invalid' to the console when the form is submitted with invalid inputs.
- c) It prevents the default behavior of the form submission.
- d) None of the above.
How do you check if an input element's value is valid using JavaScript?
- a) Use the validity.valid property.
- b) Use the checkValidity() method.
- c) Both a) and b) are correct.
- d) None of the above.
What is the purpose of the change event in JavaScript?
- a) To detect changes to an input element's value.
- b) To detect when an input element gains focus.
- c) To detect when an input element loses focus.
- d) To detect when a key is pressed inside an input element.
What is the output of the following code snippet?
```
var select = document.getElementById('mySelect');
select.addEventListener('change', function(event) {
  console.log(event.target.value);
});
```
- a) It logs the selected value of the select element.
- b) It logs the index of the selected option in the select element.
- c) It logs the event object.
- d) None of the above.
How do you prevent form submission if any of the input fields are empty using JavaScript?
- a) Iterate through all input fields and check if any of their values are empty.
- b) Use the required attribute on input fields.
- c) Both a) and b) are correct.
- d) None of the above.
What is the purpose of the submit event in JavaScript?
- a) To detect when a form is submitted.
- b) To detect changes to an input element's value.
- c) To detect when an input element gains focus.
- d) To detect when an input element loses focus.
What is the output of the following code snippet?
```
var checkbox = document.getElementById('myCheckbox');
checkbox.addEventListener('click', function(event) {
  console.log(event.target.checked);
});
```
- a) It logs true or false based on whether the checkbox is clicked or not.
- b) It logs the value of the checkbox element.
- c) It logs true when the checkbox is clicked and false when it is clicked again.
- d) None of the above.
How do you check if an input element's value matches a specific pattern using JavaScript?
- a) Use the pattern attribute on the input element.
- b) Use the test() method of a regular expression with the input element's value as the argument.
- c) Both a) and b) are correct.
- d) None of the above.
What is the output of the following code snippet?
```
var textarea = document.getElementById('myTextarea');
textarea.addEventListener('input', function(event) {
  console.log(event.target.value.length);
});
```
- a) It logs the length of the text in the textarea whenever it changes.
- b) It logs the event object.
- c) It logs the number of lines in the textarea.
- d) None of the above.
How do you disable a submit button until all required fields are filled using JavaScript?
- a) Use the disable property on the submit button element.
- b) Use the disabled attribute on the submit button element.
- c) Both a) and b) are correct.
- d) None of the above.
What is the purpose of the mouseenter event in JavaScript?
- a) To detect when the mouse enters an element.
- b) To detect when the mouse leaves an element.
- c) To detect when the mouse moves inside an element.
- d) To detect when the mouse clicks an element.
What is the output of the following code snippet?
```
var button = document.getElementById('myButton');
button.addEventListener('mouseenter', function(event) {
  console.log('Mouse entered the button');
});
```
- a) It logs 'Mouse entered the button' to the console when the mouse enters the button.
- b) It logs 'Mouse entered the button' to the console when the button is clicked.
- c) It logs the event object.
- d) None of the above.
How do you check if an input element's value is numeric using JavaScript?
- a) Use the isNaN() function with the input element's value as the argument.
- b) Use a regular expression to match numeric patterns with the input element's value.
- c) Both a) and b) are correct.
- d) None of the above.
What is the purpose of the mouseout event in JavaScript?
- a) To detect when the mouse leaves an element.
- b) To detect when the mouse enters an element.
- c) To detect when the mouse moves inside an element.
- d) To detect when the mouse clicks an element.
What is the output of the following code snippet?
```
var link = document.getElementById('myLink');
link.addEventListener('mouseout', function(event) {
  console.log('Mouse left the link');
});
```
- a) It logs 'Mouse left the link' to the console when the mouse leaves the link.
- b) It logs 'Mouse left the link' to the console when the link is clicked.
- c) It logs the event object.
- d) None of the above.
How do you check if all checkboxes in a group are checked using JavaScript?
- a) Iterate through all checkboxes and check if their checked property is true.
- b) Use the querySelectorAll method with a CSS selector for checkboxes.
- c) Both a) and b) are correct.
- d) None of the above.
What is the purpose of the mousemove event in JavaScript?
- a) To detect when the mouse enters an element.
- b) To detect when the mouse leaves an element.
- c) To detect when the mouse moves inside an element.
- d) To detect when the mouse clicks an element.
What is the output of the following code snippet?
```
var element = document.getElementById('myElement');
element.addEventListener('mousemove', function(event) {
  console.log('Mouse moved inside the element');
});
```
- a) It logs 'Mouse moved inside the element' to the console when the mouse moves inside the element.
- b) It logs 'Mouse moved inside the element' to the console when the element is clicked.
- c) It logs the event object.
- d) None of the above.
How do you prevent form submission if any of the checkboxes in a group are unchecked using JavaScript?
- a) Iterate through all checkboxes and check if any of their checked property is false.
- b) Use the querySelectorAll method with a CSS selector for checkboxes and check if any of their checked property is false.
- c) Both a) and b) are correct.
- d) None of the above.
What is the purpose of the mouseleave event in JavaScript?
- a) To detect when the mouse leaves an element.
- b) To detect when the mouse enters an element.
- c) To detect when the mouse moves inside an element.
- d) To detect when the mouse clicks an element.
What is the output of the following code snippet?
```
var element = document.getElementById('myElement');
element.addEventListener('mouseleave', function(event) {
  console.log('Mouse left the element');
});
```
- a) It logs 'Mouse left the element' to the console when the mouse leaves the element.
- b) It logs 'Mouse left the element' to the console when the element is clicked.
- c) It logs the event object.
- d) None of the above.
How do you check if a textarea element's value contains a specific substring using JavaScript?
- a) Use the includes() method of the textarea element's value.
- b) Use a regular expression to match the specific substring with the textarea element's value.
- c) Both a) and b) are correct.
- d) None of the above.
What is the purpose of the keypress event in JavaScript?
- a) To detect when a key is pressed inside an input element.
- b) To detect when a key is released after being pressed inside an input element.
- c) To detect when an input element gains focus.
- d) To detect when an input element loses focus.
What is the output of the following code snippet?
```
var input = document.getElementById('myInput');
input.addEventListener('keypress', function(event) {
  console.log(event.key);
});
```
- a) It logs the value of the key that was pressed.
- b) It logs the ASCII code of the key that was pressed.
- c) It logs the event object.
- d) None of the above.
How do you validate a password input field that must contain at least one uppercase letter using JavaScript?
- a) Use the match() method with a regular expression that matches uppercase letters.
- b) Use the toUpperCase() method on the input field's value and compare it to the original value.
- c) Both a) and b) are correct.
- d) None of the above.
What is the purpose of the keydown event in JavaScript?
- a) To detect when a key is pressed inside an input element.
- b) To detect when a key is released after being pressed inside an input element.
- c) To detect when an input element gains focus.
- d) To detect when an input element loses focus.
What is the output of the following code snippet?
```
var input = document.getElementById('myInput');
input.addEventListener('keydown', function(event) {
  console.log(event.key);
});
```
- a) It logs the value of the key that was pressed.
- b) It logs the ASCII code of the key that was pressed.
- c) It logs the event object.
- d) None of the above.
How do you check if a textarea element's value is empty using JavaScript?
- a) Check if the textarea element's value is an empty string.
- b) Check if the textarea element's value is null.
- c) Check if the textarea element's value is undefined.
- d) All of the above.
What is the purpose of the keyup event in JavaScript?
- a) To detect when a key is released after being pressed inside an input element.
- b) To detect when a key is pressed inside an input element.
- c) To detect when an input element gains focus.
- d) To detect when an input element loses focus.
What is the output of the following code snippet?
```
var input = document.getElementById('myInput');
input.addEventListener('keyup', function(event) {
  console.log(event.key);
});
```
- a) It logs the value of the key that was released.
- b) It logs the ASCII code of the key that was released.
- c) It logs the event object.
- d) None of the above.

Contribution 🛠️

Please create an Issue for any improvements, suggestions or errors in the content.

You can also contact me using Linkedin for any other queries or feedback.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

n3q.md

n3q.md

JavaScript: Event & Form Validation

Set A

Set B

Contribution 🛠️

Files

n3q.md

Latest commit

History

n3q.md

File metadata and controls

JavaScript: Event & Form Validation

Set A

Set B

Contribution 🛠️