n3aq.md

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.

1. Which method is used to attach an event handler to an HTML element in JavaScript?

   • a) addEventListener()
   • b) attachEvent()
   • c) onEvent()
   • d) eventHandler()

2. 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

3. Which event occurs when the user clicks on an HTML element?

   • a) click
   • b) mouseover
   • c) keydown
   • d) submit

4. How can you access the target element of an event in JavaScript?

   • a) event.target
   • b) event.element
   • c) event.targetElement
   • d) event.currentTarget

5. Which method is used to remove an event handler from an HTML element in JavaScript?

   • a) removeEventListener()
   • b) detachEvent()
   • c) offEvent()
   • d) removeHandler()

6. 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

7. Which property is used to prevent event propagation in JavaScript?

   • a) event.stopPropagation()
   • b) event.preventDefault()
   • c) event.cancelBubble()
   • d) event.stopImmediatePropagation()

8. 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

9. 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

10. Which method is used to add a custom error message to a form field in JavaScript?

    • a) setCustomValidity()
    • b) addError()
    • c) displayError()
    • d) setError()

11. 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

12. Which event occurs when the user interacts with an input field in a form?

    • a) input
    • b) change
    • c) focus
    • d) submit

13. How can you check if a checkbox is checked in JavaScript?

    • a) element.checked
    • b) element.value
    • c) element.selected
    • d) element.active

14. 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

15. Which method is used to reset a form to its initial state in JavaScript?

    • a) reset()
    • b) clearForm()
    • c) emptyForm()
    • d) removeForm()

16. 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

17. 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"

18. Which event occurs when a user starts typing in an input field?

    • a) input
    • b) change
    • c) focus
    • d) keydown

19. How can you check if an input field is empty in JavaScript?

    • a) element.value === ""
    • b) element.empty()
    • c) element.isNull()
    • d) element.isUndefined()

20. 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

21. Which event occurs when a user moves the mouse over an HTML element?

    • a) mouseover
    • b) mouseenter
    • c) mousemove
    • d) mousein

22. How can you check if a radio button is selected in JavaScript?

    • a) element.checked
    • b) element.selected
    • c) element.value
    • d) element.active

23. 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

24. Which method is used to focus on an HTML element in JavaScript?

    • a) focus()
    • b) setFocus()
    • c) activate()
    • d) select()

25. 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

26. Which event occurs when the user presses a key on the keyboard?

    • a) keydown
    • b) keypress
    • c) keyup
    • d) keypress

27. 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

28. 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

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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://"

36. 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

37. 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

38. 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

39. 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

40. 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

41. 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

42. 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

43. 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

44. 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

45. 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

46. 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

47. 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

48. 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

49. 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

50. 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

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.