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()
is a CSS selector that is used to select the element that has focus.
syntax:
\:focus {
css declarations;
}
describe the following CSS selector and its syntax
focus
describe the
**multiple attribute **
of the form element
<select></select>
this attribute specifies that multiple item may be selected from the dropdown list by the user using CTRL it also specifies how many options are shown at a time
is the charcter used to anchor the regex to the end of the value
describe the javascript regex anchor
$
describe the following <input /> type and write its syntax
Works similar to the text input type except allows for limited email validation on the client side by the browser
Syntax:
<input type=”submit” />
describe the regex method
exec()
this Tests for a match in a string. Returns the first match
we can check this using
<noscript>”display text if javascript disabled”</noscript>
in HTML how can we check if javascript has been disabled on the client
the reason for this is:
1.Accessibility - a screen reader for example can associate the label and input
2.Usability/accessibility - the label itself acts as a clickable element for focusing on the input this increases the clickable area of the input (especially good for radio buttons)
when we have used an <input> tag why should we always have a <label></label> tag associated with it
is a property of the event object and will return the type of event that was triggered
describe
event.type
This <input /> attribute give the input an initial value or value to hold
NOTE: this attribute will be sent to the server on submition of the form
describe the following attribute of the <input /> tag
Value = “”
describe the javascript event
blur
this javascript event occurs when an element loses focus
for example the user clicks somewhere else on the page or field.
methods:
1. exec()
2. test()
3. toString()
name 3 javascript regex methods
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
what is the syntax and parameters that will
attach an event handler to an element via javascripts addEventListener() method
describe the javascript regex anchor
$
is the charcter used to anchor the regex to the end of the value
This <input /> attribute states that it is a requirement that this input is filled before form is sent
describe the following attribute of the <input /> tag
**Required **
describe the HTML form element<input />
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 following attribute of the <input /> tag
Checked
This <input /> attribute will specify that this input element is selected by default
describe the following <input /> type and write its syntax
number
can be used to collect numeric only data from the user
Syntax:
<input type=”number” />
describe
Event.target.id
is a property of the event.target object and will return the id of the element
describe the javascript regex modifier
i
regex modifier that Perform case-insensitive matching
describe
event.target.value
is a property of the event.target object and will return the value that is held by the HTML element
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
HTML:
<form onsubmit="return handleSubmit(event.target)”> </form>
describe the following attribute of the <input /> tag
**Max=”” **
This <input /> attribute specify a maximum value
NOTE: works only with number, range, date, datetime-local, month, time and week
describe the regex method
toString()
method:
Returns the string value of the regular expression
describe the javascript regex anchor
^
is the charcter used to anchor the regex to the start of the value
describe the HTML <form></form>
attribute
onsubmit
- this will create an event upon the form submition the event can then be passed to javascript
- can be used to call a script before the form is sent
- can be used to determine whether the form should be sent (by including a return keyword)
what is the syntax and parameters of the <form></form> attribute
onsubmit
syntax:
<form onsubmit="script">
@param script the script to be ran on submit
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” />
describe the following <input /> type and write its syntax
checkbox
Syntax:
object.eventType=script;
@param object a html element
@param eventType an event type such as onchange
@param script a javascript function that has 1 argument passed to it being the evnt object
what is the syntax and parameters that will
attach an event handler to an element via javascript (get a reference to the HTML element)
is a property of the event.target object and will return the id of the element
describe
Event.target.id
describe the following attribute of the <input /> tag
Id = “”
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>
syntax:
/pattern/modifier(s);
Example:
var regex = /fox/i;
what is the syntax for creating a regex object in javascript
This <input /> attribute will specify that this input element is selected by default
describe the following attribute of the <input /> tag
Checked
Creates a submit button and is used to submit the form
NOTE: this itself can also hold a name and a value attribute so on the server side we could have different behaviours depending upon these
Syntax:
<input type=”submit” />
describe the following <input /> type and write its syntax
submit
write a regex that will match values that end with 09
regex:
/09$/
describe the
javascript regex anchor
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 following <input /> type and write its syntax
submit
Creates a submit button and is used to submit the form
NOTE: this itself can also hold a name and a value attribute so on the server side we could have different behaviours depending upon these
Syntax:
<input type=”submit” />
describe the following attribute of the <input /> tag
Maxlength = “”
This <input /> attribute state a maximum number of characters for the input
Allows us to collect a short amount of text from the user such as their name.
Syntax:
<input type=”text” />
describe the following <input /> type and write its syntax
text
method:
Tests for a match in a string. Returns true or false
describe the regex method
test()
describe
event.type
is a property of the event object and will return the type of event that was triggered
write the syntax to select an input element in CSS
syntax:
input {
declaration;
}
Works similar to the text input type except allows for limited email validation on the client side by the browser
Syntax:
<input type=”submit” />
describe the following <input /> type and write its syntax
this javascript event occurs when the value of an element changes, each time it happens, for example on every keypress.
NOTE: This event may not be supported in all web browsers, and the user may not welcome feedback before they have finished entering data
describe the javascript event
input
describe the javascript event
focus
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.
when we have used an <input> tag why should we always have a <label></label> tag associated with it
the reason for this is:
1.Accessibility - a screen reader for example can associate the label and input
2.Usability/accessibility - the label itself acts as a clickable element for focusing on the input this increases the clickable area of the input (especially good for radio buttons)
these include:
<input> <label> <select> <textarea> <button> <fieldset> <legend> <datalist> <output> <option> <optgroup>
name as many
HTML form elements
as you can. there are 11 in total
write a regex that will match values that begin with 09
regex:
/^09/
describe the regex method
test()
method:
Tests for a match in a string. Returns true or false
describe the HTML form element
<label></label>
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
- this will create an event upon the form submition the event can then be passed to javascript
- can be used to call a script before the form is sent
- can be used to determine whether the form should be sent (by including a return keyword)
describe the HTML <form></form>
attribute
onsubmit
Can be used to create a set of radio buttons that the user can select from.
NOTE: If each radio button shares the same name then only one of those radio buttons may be selected
Syntax:
<input type=”radio” />
describe the following <input /> type and write its syntax
radio
this javascript event occurs when an element loses focus
for example the user clicks somewhere else on the page or field.
describe the javascript event
blur
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>
describe the following form element and its syntax
select
describe the javascript event
input
this javascript event occurs when the value of an element changes, each time it happens, for example on every keypress.
NOTE: This event may not be supported in all web browsers, and the user may not welcome feedback before they have finished entering data
name as many
HTML form elements
as you can. there are 11 in total
these include:
<input> <label> <select> <textarea> <button> <fieldset> <legend> <datalist> <output> <option> <optgroup>
what is the syntax and parameters that will
attach an event handler to an element via javascript (get a reference to the HTML element)
Syntax:
object.eventType=script;
@param object a html element
@param eventType an event type such as onchange
@param script a javascript function that has 1 argument passed to it being the evnt object
this attribute specifies that multiple item may be selected from the dropdown list by the user using CTRL it also specifies how many options are shown at a time
describe the
**multiple attribute **
of the form element
<select></select>
describe 7 steps for user input validation
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.
syntax:
input[type=text] {
declaration;
}
using CSS write the syntax to select an input element which has the type attribute of text
describe an
event object
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 the following attribute of the <input /> tag
Minlength = “”
This <input /> attribute state a minimum number of characters for the input
what is the syntax and parameters that will
attach an event handler to an element via HTML
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
this is a script or function that will be able to handle any events that occur on the page
describe an
event handler
regex modifier that Perform case-insensitive matching
describe the javascript regex modifier
i
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” />
describe the following <input /> type and write its syntax
hidden
describe the following attribute of the <input /> tag
Name = “”
this <input /> attribute gives the input element a name
NOTE: this attribute is sent to the server on form submission
syntax:
input {
declaration;
}
write the syntax to select an input element in CSS
in HTML how can we check if javascript has been disabled on the client
we can check this using
<noscript>”display text if javascript disabled”</noscript>
is the charcter used to anchor the regex to the start of the value
describe the javascript regex anchor
^
describe the following <input /> type and write its syntax
radio
Can be used to create a set of radio buttons that the user can select from.
NOTE: If each radio button shares the same name then only one of those radio buttons may be selected
Syntax:
<input type=”radio” />
describe the following attribute of the <input /> tag
Value = “”
This <input /> attribute give the input an initial value or value to hold
NOTE: this attribute will be sent to the server on submition of the form
describe the javascript regex modifier
g
regex modifier that Perform a global match (find all matches rather than stopping after the first match)
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
what are the three methods to
attach an event handler to a document event
how can we collect and then send user input back to a server
this can be accomplished using the HTML
<form></form>
can be used to collect numeric only data from the user
Syntax:
<input type=”number” />
describe the following <input /> type and write its syntax
number
This <input /> attribute
specify a minimum value
NOTE: works only with number, range, date, datetime-local, month, time and week
describe the following attribute of the <input /> tag
Min=””
This <input /> attribute state a minimum number of characters for the input
describe the following attribute of the <input /> tag
Minlength = “”
regex:
/^09/
write a regex that will match values that begin with 09
