Part 3 - Client side Validation and feedback Flashcards
this javascript event occurs when an element gets focus
for example the user uses the Tab key to ‘tab’ to an input or clicks on a text input or its label.
describe the javascript event
focus
describe the following <input /> type and write its syntax
text
Allows us to collect a short amount of text from the user such as their name.
Syntax:
<input type=”text” />
1.Detect that the user has changed an input value through typing or clicking by responding to form events.
2.In JavaScript, obtain a reference to the input element and its value.
3.Compare that value against what is permitted for that input element and the business requirements of the application.
4.If the value matches the requirements, provide feedback to the user to confirm this.
5.If the value doesn’t match the requirements, provide a different message, indicating that the data is not suitable, and explaining what is needed.
6.If the user attempts to submit the form to the web server while some input values don’t match the requirements, the submission is blocked and a further message explaining what needs to be done is added.
7.If the user attempts to submit the form when all input values match the requirements, then the form submission is permitted.
describe 7 steps for user input validation
what is the syntax and parameters for the HTML label tag
syntax:
<label for="element_id">label text</label>
@param element_id the id of the element the label will be bound to
describe the following form element and its syntax
select
This is a form element that will create a drop down list of options of which we can select only one option from.
NOTE: However this can be extended to accept multiple selections if the multiple attribute is used
Syntax:
<select name=”” id=””>
<option value=””>””</option>
<option value=””>””</option>
<option value=””>””</option>
</select>
this will tie a regular expression to the start or end of the value
NOTE: These are placed within the forward slashes with the pattern
describe the
javascript regex anchor
this javascript event occurs when the value of an element changes at the point the change is completed
for example by clicking or by losing focus after entering text. This event is particularly useful for detecting that the user has made a new selection from a dropdown list, set of radio buttons or checkboxes.
describe the javascript event
change
This is a form element that can be used to collect a large piece of text from the user such as a comment or review
Syntax:
<textarea></textarea>
describe the form element and syntax of
textarea
method:
Returns the string value of the regular expression
describe the regex method
toString()
describe the following <input /> type and write its syntax
hidden
Allows us to create a hiddn field that will be sent to the server and hold some value we give it
Syntax:
<input type=”hidden” />
what are the three methods to
attach an event handler to a document event
this can be done by:
1. attaching the event hanler within the HTML
2. attaching it using javascript (via referencing the element)
3. attach In javascript using the addEventListener() method
regex:
/09$/
write a regex that will match values that end with 09
this is a form element that provides the textual description for the input tag. such as asking a question that will accompany the input
note: this is used in contrast to only using <p> tags
describe the HTML form element
<label></label>
describe the following attribute of the <input /> tag
Min=””
This <input /> attribute
specify a minimum value
NOTE: works only with number, range, date, datetime-local, month, time and week
This works just like the text input type but will hide the typed text
Syntax:
<input type=”password” />
describe the following <input /> type and write its syntax
password
using CSS write the syntax to select an input element which has the type attribute of text
syntax:
input[type=text] {
declaration;
}
syntax:
<form onsubmit="script">
@param script the script to be ran on submit
what is the syntax and parameters of the <form></form> attribute
onsubmit
give 2 attributes of the form element
<textarea></textarea>
attributes include:
Rows = “” - the number of rows the textbox will have (in characters)
Cols = “” - the number of columns the textbox will have (in characters)
what is the syntax for creating a regex object in javascript
syntax:
/pattern/modifier(s);
Example:
var regex = /fox/i;
this is a special string of characters that will create a search pattern. it can then be tested against a string to check whether the pattern is contained within the string
what is a
regular expression (REGEX)
this <input /> attribute gives the input element a name
NOTE: this attribute is sent to the server on form submission
describe the following attribute of the <input /> tag
Name = “”
this can be accomplished using the HTML
<form></form>
how can we collect and then send user input back to a server
this is an object that holds the html element that triggered the event and all of its properties
describe
event.target
is a property of the event.target object and will return the value that is held by the HTML element
describe
event.target.value
describe the following <input /> type and write its syntax
checkbox
Similar to the radio input type but when each input shares the same name it becomes a group and the user can select multiple items from the checkbox group
Syntax:
<input type=”checkbox” />
this Is a form element that can be placed within a form and can be used to collect different types of data from the user
NOTE: This is a self closing element or empty element so for it to be xml compliant it must be manually closed
describe the HTML form element<input />
describe the following CSS selector and its syntax
focus
is a CSS selector that is used to select the element that has focus.
syntax:
\:focus {
css declarations;
}
Syntax:<elementeventType="myScript">
@param element a html element such as input
@param eventType an event type such as onchange
@param myScript a javascript function that has 1 argument passed to it being the event object
what is the syntax and parameters that will
attach an event handler to an element via HTML
what is a
regular expression (REGEX)
this is a special string of characters that will create a search pattern. it can then be tested against a string to check whether the pattern is contained within the string
write the regex that will match only the value “fox”
regex:
/^fox$/
describe the following attribute of the <input /> tag
**Required **
This <input /> attribute states that it is a requirement that this input is filled before form is sent
attributes include:
Rows = “” - the number of rows the textbox will have (in characters)
Cols = “” - the number of columns the textbox will have (in characters)
give 2 attributes of the form element
<textarea></textarea>
describe an
event handler
this is a script or function that will be able to handle any events that occur on the page
write out the HTML that is a skeleton of a form with one input
HTML:
<form method="POST" action="URL_to_server_script"> <p> <label for="">label_text_for_input</label> <input type="" /> </p> </form>
HTML:
<form method="POST" action="URL_to_server_script"> <p> <label for="">label_text_for_input</label> <input type="" /> </p> </form>
write out the HTML that is a skeleton of a form with one input
this can be done by:
1. selecting a form element
2. selecting a form element and attribute
3. selecting the class of an element
4. selecting the id of an element
name 4 ways we can select elements and style forms in CSS
This <input /> attribute specify a maximum value
NOTE: works only with number, range, date, datetime-local, month, time and week
describe the following attribute of the <input /> tag
**Max=”” **
HTML:
<form onsubmit="return handleSubmit(event.target)”> </form>
write the HTML that creates a form with the onsubmit attribute that
1. calls a function named handleSubmit()
2. passes the function the target of the event
3. determines whether the form should be submitted or not
describe the following <input /> type and write its syntax
password
This works just like the text input type but will hide the typed text
Syntax:
<input type=”password” />
describe
event.target
this is an object that holds the html element that triggered the event and all of its properties
this is created whenever an event occurs on the web page (such as a value change on a form or a mouse click).
It is a javascript object that has within it properties and values that describe everything about the event such as which html element created it or what type of event it was
describe an
event object
This <input /> attribute gives the element a unique id within the html
NOTE: can be referenced by CSS, javascript and HTML tags such as <label></label>
describe the following attribute of the <input /> tag
Id = “”
This <input /> attribute state a maximum number of characters for the input
describe the following attribute of the <input /> tag
Maxlength = “”
syntax:
<label for="element_id">label text</label>
@param element_id the id of the element the label will be bound to
what is the syntax and parameters for the HTML label tag
name 3 javascript regex methods
methods:
1. exec()
2. test()
3. toString()
describe the javascript event
change
this javascript event occurs when the value of an element changes at the point the change is completed
for example by clicking or by losing focus after entering text. This event is particularly useful for detecting that the user has made a new selection from a dropdown list, set of radio buttons or checkboxes.
name 4 ways we can select elements and style forms in CSS
this can be done by:
1. selecting a form element
2. selecting a form element and attribute
3. selecting the class of an element
4. selecting the id of an element
regex modifier that Perform a global match (find all matches rather than stopping after the first match)
describe the javascript regex modifier
g
regex:
/^fox$/
write the regex that will match only the value “fox”
what is the syntax and parameters that will
attach an event handler to an element via javascripts addEventListener() method
Syntax:
element.addEventListener(event,function,useCapture)
@param event the event type we wish to have a function called for
@parm function the javascript function that will be called on such an event
@param useCapture a boolean used for bubbling
describe the form element and syntax of
textarea
This is a form element that can be used to collect a large piece of text from the user such as a comment or review
Syntax:
<textarea></textarea>
this Tests for a match in a string. Returns the first match
describe the regex method
exec()
