1. No category

selectFieldName.value

INT222 - Internet Fundamentals
Shi, Yue (Sunny)
Office: T2095
[email protected]
SENECA COLLEGE
Outline
• Client side validation
– Using HTML5 features
– Using JavaScript
• Next Class
– DOM & Events
2
Client-Side Validation
- Advantages
• Saves time and bandwidth.
• It's fast with immediate user feedback without having to
wait for the page to load.
• You can safely display only one error at a time and focus
on the wrong field, to help ensure that the user correctly
fills in all the details as required.
• Still need server-side validation.
• Client and server-side validation complement each other,
and as such, they really shouldn't be used independently.
3
Client-Side Validation
- Approaches
• Display the errors one by one, focusing on
the offending field.
– Makes revising and successfully submitting the
form much easier for the user
• Display all errors simultaneously, serverside validation style.
4
Client-Side Validation
- Guidelines
• Presence or Absence Test
– To determine whether the required fields left empty.
• Value Test
– To determine if a field has a specific value or code.
• Range Test
– To determine if a value entered is within a specific
range (inclusive or exclusive)
5
Client-Side Validation
- Guidelines
• Reasonableness Test
– To determine if a value entered is reasonable based on other
information supplied or information available to us. This test
needs to be review periodically.
• Check Digit Test
– To determine if for example, a credit card number or a Driver's
license number is valid.
• Consistency Test MULTIPLE FIELD(s)
– To determine if a value entered is consistent with other
information entered.
6
Client-Side Validation
- Using HTML5
 HTML5 provides several new input types & attributes
for forms.
New Types:
Color, date, email, number, range
 Note: these types are not universal. Some browsers do not
support some of the new features
wk8 -> form_ex_3.html
7
Client-Side Validation
- Using HTML5
 New Attributes:
required attribute
– Specifies that an input field is required (must be filled out).
– but spaces are acceptable.
– For radio buttons, checkboxs and select-option, The required
attribute is not supported in any of the major browsers.
pattern attribute
– Specifies a regular expression to check the input value
against.
8
Input Restrictions with HTML5
title attribute
– Used to show validation rules
Min, max, maxlength attributes
– Specifies the minimum/maximum value for an input
field
wk8-> form_ex_3.html
9
Client-side Validation with JavaScript
• One thing you’ve already known:
– Validation on user’s input
• Two more things you need to know:
– How to execute/call JavaScript code
– How to access user’s input on the form
Where to put JavaScript Code?
1. In <head> </head>
one or many JavaScript code chunks
<script>
function func1()
{
/* Javascript code */
}
</script>
Js.html
Where to put JavaScript Code?
2. In <body> </body>
one or many JavaScript code chunks
<script>
function func1()
{
/* JavaScript code */
}
</script>
<script>
/* just some Javascript code, may be not in function */
</script>
Js.html
Where to put JavaScript Code?
3. As External file
• Syntax:
<script src=“ex.js"> </script>
•
In file ex.js:
function message()
{
alert("This javaScript is in external file and was called
with the onload event");
}
Js.html
How Validation Function works
• onsubmit:
<form method='post' name='form1'
action = "http://formpost.azurewebsites.net/home/test"
onsubmit='return validateName()'>
• User clicks “submit” button,
– trigger the validation function: validateName()
– If validateName() returns true, the action will be taken
– Otherwise, it returns to user, the form will not be submitted
14
Object Hierarchy
15
Example –
Text (phone number)
• Text Box:
– Rule: all digits
function validateMyForm(frm1)
{
if (parseInt(frm1.phone.value) != frm1.phone.value)
{
alert('Please enter a phone number, numbers only');
frm1.phone.focus();
frm1.phone.select();
return false;
valid_phoneNumber.html
}
return true;
valid_phoneNumber_pattern.html
}
16
Example –
Text (name)
• Text Box:
• Rules:
– at least one alphabetic letter (‘a’-’z’, ‘A’-’Z’)
– Check no input
var inputValue = document.form1.name.value;
valid_text_name.html
17
Example –
Datalist
• Datalist:
• Rules:
– Must select one option from the data list
var dl = document.ex.dept.value.trim();
valid_datalist.html
18
ExampleTextArea
• TextArea:
• Rules:
–
–
–
–
presence
Not only blanks,
Not only New Line,
Not only Carriage
if (document.form1.comments.value.length == 0)
valid_textArea.html
19
ExampleRadio
• Radio Button:
• Rule:
valid_radio.html
– must select one
for (var i = 0; i < max; i++)
{
//if (document.form1.specialty[i].checked == true)
if (document.form1.specialty[i].checked)
{
counter++;
}
}
20
ExampleCheckBox
• CheckBox:
• Rules:
valid_checkbox.html
–
–
–
–
At least check one
Check all of the above
Check none of the above
If checked one item, deselect the “check none of the
above”
– if (document.form1.system_type[i].checked)
21
Example –
Select
• Menu Selection (Select):
– Property: selectedIndex
•
•
•
•
sets or returns the index of the selected option in a drop-down list.
The index starts at 0.
If no option is selected, the selectedIndex property will return -1.
If set selectedIndex property as -1, deselect all options.
•
•
For multiple selections, return the index of the first option selected.
selectFieldName.value: the selected option value
• Rule:
– Require to select one item
if (document.form1.plans.selectedIndex == -1)
valid_select.html
22
Examplebutton, calculation, enable/disable
•
Button: click a button, do calculation
var total = items * Number(document.form1.costper.value) * 1.13;
•
Enable/ Disable a field:
document.form1.total.disabled = false;
document.form1.total.value = ttotal.toFixed(2);
document.form1.total.disabled = true;
button_calculation.html
23
Example –
“hidden” type
•
•
•
<input type='hidden' name='jsEnabled' id = "jsEnabled" value=‘Value1' />
This field will not show on the page
It provides a means for servers to store state information with a form.
•
•
change its value by JavaScript, not by user
document.form1.jsEnabled.value = “Value 2";
var hidValue = document.form1.jsEnabled.value;
if (hidValue.toLowerCase() == “value1")
{ document.form1.jsEnabled.value = “value2";
/* Change hidden value */
}
hidden_type.html
24
Example –
Hide / Show a field
<p id = "hideText"> Name: <input type = "text" name = "hideText"/> </p>
function showHiddenField()
{
document.getElementById("hideText").disabled = false;
document.getElementById("hideText").style.display = "block";
}
function hideField()
{ var hideObj = document.getElementById("hideText");
hideObj.disabled = true;
hideObj.style.display = "none";
}
show_hide_field.html
Multiple Validation Rules
function func1()
{ code1; }
function func2()
{ code2; }
/////////////////////////////
function validateAll()
{
if (func1() && func2())
{
return true;
}
else
{ return false;
}
} // function validateAll()
• <form name="form1" method = "post“
action = "http://formpost.azurewebsites.net/home/test"
onsubmit="return validateAll();">
26
Validation using JavaScript
Summary
• onsubmit:
<form method='post' name='form1'
action = "http://formpost.azurewebsites.net/home/test"
onsubmit='return validateName();'>
• Refer to the element:
document.formname.elementname
document.form1.name.value
document.form1.specialty[i].checked
if (document.form1.plans.selectedIndex == -1)
27
Validation using JavaScript
Summary
• Refer to the element (cont’d):
– using getElementById
document.getElementById("elementid")
– using this key word
Using this key word in form element
– using getElementsByName
document.getElementsByName("elementname")
returns a collection
• Validation function return true/false
28
• Assignment #3
29
Next Class
• Events & DOM
30
Thank you!

 Download  Report

Paperzz.com

Your Paperzz

© Copyright 2026 Paperzz