From 44908e99b7c3bde69d2de83bd2dac6bf6e21b55e Mon Sep 17 00:00:00 2001 From: doosabhulaxmi Date: Mon, 21 Oct 2024 16:48:05 +0530 Subject: [PATCH] feat(curriculum): added question on based form validation (#56558) --- .../66edd3403d7077eece6dc4b6.md | 200 +++++++++--------- 1 file changed, 100 insertions(+), 100 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/english/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md index 2f36f50f71d..698708ccfd7 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md @@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz. #### --text-- -Placeholder question +Which method is used to check if an `input` element's value satisfies the validation rules? #### --distractors-- -Placeholder distractor 1 +`validateInput()` --- -Placeholder distractor 2 +`isValid()` --- -Placeholder distractor 3 +`checkValue()` #### --answer-- -Placeholder answer +`checkValidity()` ### --question-- #### --text-- -Placeholder question +What happens if the `checkValidity()` method finds an invalid `input`? #### --distractors-- -Placeholder distractor 1 +The form is automatically submitted --- -Placeholder distractor 2 +Nothing happens --- -Placeholder distractor 3 +The `input` value is cleared #### --answer-- -Placeholder answer +The browser displays a validation message ### --question-- #### --text-- -Placeholder question +Which method is used to customize the message shown during validation failure? #### --distractors-- -Placeholder distractor 1 +`setErrorMessage()` --- -Placeholder distractor 2 +`setValidationMessage()` --- -Placeholder distractor 3 +`customMessage()` #### --answer-- -Placeholder answer +`setCustomValidity()` ### --question-- #### --text-- -Placeholder question +What is the default validation behavior for required fields when the form is submitted? #### --distractors-- -Placeholder distractor 1 +The form is submitted even if required fields are empty --- -Placeholder distractor 2 +The form submits but gives a warning --- -Placeholder distractor 3 +The form resets the `input` values #### --answer-- -Placeholder answer +The browser stops the form submission if required fields are empty ### --question-- #### --text-- -Placeholder question +Which actions does not cause an HTML form to be checked for errors? #### --distractors-- -Placeholder distractor 1 +Changing the `input` value --- -Placeholder distractor 2 +Submitting the form --- -Placeholder distractor 3 +Calling `reportValidity()` #### --answer-- -Placeholder answer +Clicking a reset button ### --question-- #### --text-- -Placeholder question +What does `checkValidity()` return when all form inputs are valid? #### --distractors-- -Placeholder distractor 1 +`false` --- -Placeholder distractor 2 +`undefined` --- -Placeholder distractor 3 +`null` #### --answer-- -Placeholder answer +`true` ### --question-- #### --text-- -Placeholder question +When does the `checkValidity()` method stop form submission? #### --distractors-- -Placeholder distractor 1 +When the form has no submit button --- -Placeholder distractor 2 +When the form `action` is empty --- -Placeholder distractor 3 +When the form method is POST #### --answer-- -Placeholder answer +When the form has at least one invalid `input` (and the default behavior of form submission is prevented). ### --question-- #### --text-- -Placeholder question +What happens if `checkValidity()` is called, but a field fails validation? #### --distractors-- -Placeholder distractor 1 +The form submits without error --- -Placeholder distractor 2 +The `input` values are cleared --- -Placeholder distractor 3 +The form closes immediately #### --answer-- -Placeholder answer +The invalid field is highlighted and a message appears ### --question-- #### --text-- -Placeholder question +Which action will make `checkValidity()` run? #### --distractors-- -Placeholder distractor 1 +Resetting the form --- -Placeholder distractor 2 +Changing an `input` value --- -Placeholder distractor 3 +Clicking an anchor tag #### --answer-- -Placeholder answer +Submitting the form manually ### --question-- #### --text-- -Placeholder question +What is the purpose of calling `checkValidity()` before submitting a form? #### --distractors-- -Placeholder distractor 1 +To automatically submit the form --- -Placeholder distractor 2 +To reload the page --- -Placeholder distractor 3 +To clear all `input` fields #### --answer-- -Placeholder answer +To check if all `input` elements meet their specified constraints ### --question-- #### --text-- -Placeholder question +What is the main purpose of `e.preventDefault()`? #### --distractors-- -Placeholder distractor 1 +To reload the form --- -Placeholder distractor 2 +To clear form data --- -Placeholder distractor 3 +To reset the form values #### --answer-- -Placeholder answer +To stop the default action of an event ### --question-- #### --text-- -Placeholder question +When used on a form's submit event, what does `e.preventDefault()` do? #### --distractors-- -Placeholder distractor 1 +It submits the form --- -Placeholder distractor 2 +It clears all form fields --- -Placeholder distractor 3 +It disables the form temporarily #### --answer-- -Placeholder answer +It prevents the form from being submitted ### --question-- #### --text-- -Placeholder question +In which scenario is `e.preventDefault()` most useful? #### --distractors-- -Placeholder distractor 1 +When handling a button click that submits a form --- -Placeholder distractor 2 +When closing a modal dialog --- -Placeholder distractor 3 +When opening a new page #### --answer-- -Placeholder answer +When submitting a form via AJAX and preventing a page reload ### --question-- #### --text-- -Placeholder question +What happens if you forget to call `e.preventDefault()` on a form submit event? #### --distractors-- -Placeholder distractor 1 +The form is submitted via AJAX --- -Placeholder distractor 2 +The form does not submit --- -Placeholder distractor 3 +The form data is lost #### --answer-- -Placeholder answer +The form submits and refreshes the page ### --question-- #### --text-- -Placeholder question +Which default behavior can be prevented using `e.preventDefault()`? #### --distractors-- -Placeholder distractor 1 +Editing a form --- -Placeholder distractor 2 +Rendering the form --- -Placeholder distractor 3 +Reloading the form #### --answer-- -Placeholder answer +The default behavior caused by submitting a form (e.g., page refresh or POST call). ### --question-- #### --text-- -Placeholder question +What triggers the form's submit event? #### --distractors-- -Placeholder distractor 1 +When an input field changes --- -Placeholder distractor 2 +When the form is reset --- -Placeholder distractor 3 +When the form's action is cleared #### --answer-- -Placeholder answer +When a form's submit button is clicked or Enter is pressed ### --question-- #### --text-- -Placeholder question +Where do you usually handle the submit event in JavaScript? #### --distractors-- -Placeholder distractor 1 +On a text input element --- -Placeholder distractor 2 +On any field in the form --- -Placeholder distractor 3 +On a button element outside the form #### --answer-- -Placeholder answer +On the form element itself ### --question-- #### --text-- -Placeholder question +What does the submit event do by default? #### --distractors-- -Placeholder distractor 1 +It validates the form but doesn’t submit it --- -Placeholder distractor 2 +It clears the form fields --- -Placeholder distractor 3 +It cancels form submission #### --answer-- -Placeholder answer +It sends form data to the server specified in the form's action ### --question-- #### --text-- -Placeholder question +Which event should you listen for to handle form data when the form is submitted in JavaScript? #### --distractors-- -Placeholder distractor 1 +`"input"` --- -Placeholder distractor 2 +`"change"` --- -Placeholder distractor 3 +`"focus"` #### --answer-- -Placeholder answer +`"submit"` ### --question-- #### --text-- -Placeholder question +What must be done to prevent the default form submission behavior in the submit event? #### --distractors-- -Placeholder distractor 1 +Call `submit.preventDefault()` --- -Placeholder distractor 2 +Stop the form from being displayed --- -Placeholder distractor 3 +Set the form's `method` to `"GET"` #### --answer-- -Placeholder answer +Call `e.preventDefault()`