mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-13 22:00:19 -04:00
feat(curriculum): added question on based form validation (#56558)
This commit is contained in:
doosabhulaxmi
@@ -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()`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user