Scribd
Upload
79 views10 pages

COS30043 Lecture 06 - Forms and Validation

The document discusses form validation using HTML5 attributes, VueJS, and Vuetify. It provides examples of validating forms with required fields, minimum and maximum lengths, data types, and patterns using HTML5 attributes. It also demonstrates validating forms using VueJS by handling form submissions and displaying error messages. Additionally, it shows how to validate forms using the Vuetify UI framework with components like v-form, text fields, buttons and custom validation rules.

Uploaded by

gurmehars2019
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
79 views10 pages

COS30043 Lecture 06 - Forms and Validation

The document discusses form validation using HTML5 attributes, VueJS, and Vuetify. It provides examples of validating forms with required fields, minimum and maximum lengths, data types, and patterns using HTML5 attributes. It also demonstrates validating forms using VueJS by handling form submissions and displaying error messages. Additionally, it shows how to validate forms using the Vuetify UI framework with components like v-form, text fields, buttons and custom validation rules.

Uploaded by

gurmehars2019
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

COS30043

Interface Design and


Development

Lecture 6 – Form and Validation

Contents

Form Validation:
– Using HTML 5 Form Attributes

– Using VueJS

– Using Vuetify

2 - Interface Design and Development, © Swinburne

1
HTML 5 Form Validation Attributes
•required: Specifies whether a form field needs to be filled
in before the form can be submitted.
•minlength and maxlength: Specifies the minimum and
maximum length of textual data (strings)
•min and max: Specifies the minimum and maximum
values of numerical input types
•type: Specifies whether the data needs to be a number,
an email address, or some other specific preset type.
<input type=“date” …
<input type=“time”…
<input type=“email” …
•pattern: Specifies a regular expression that defines a
pattern the entered data needs to follow.
3 - Interface Design and Development, © Swinburne

HTML 5 Form Validation Example

<form method="post"
action="https://mercury.swin.edu.au/it000000/formtest.php" >

<p>First Name:<input type="text" name="fName"


required minlength="5" maxlength="8" ></p>
<p>Age:<input type="number" name="age" min="10"
max="50" ></p>
<p>Date:<input type="date" name="date" ></p>
<p>Post Code:<input type="text" name="postcode"
pattern="\d{4}" ></p>

<p><input type="submit" value="submit"></p>


</form>

4 - Interface Design and Development, © Swinburne

2
Contents

Form Validation:
– Using HTML 5 Form Attributes

– Using VueJS

– Using Vuetify

5 - Interface Design and Development, © Swinburne

VueJS Form Validation


• If you want VueJS completely control over the
validations
– use form’s novalidate attribute to disable the
HTML 5 validations supported by modern
browsers
Example: <form novalidate >

6 - Interface Design and Development, © Swinburne

3
VueJS Form Validation – HTML
<div id="app">
<form @submit="checkForm“ method="post“
action="https://mercury.swin.edu.au/it000000/formtest.php" novalidate >
<div v-if="errors.length">
<p>Please correct the following error(s):</p>
Error message
<ul> <li v-for="error in errors">{{ error }}</li> </ul>
</div>
<p>
<label for="fName">First Name</label> Text input
<input type="text" name="fName" id="fName" v-model="fName"/>
</p>
<p><input type="submit" value="submit"> </p> Submit button
</form>
</div>
7 - Interface Design and Development, © Swinburne

VueJS Form Validation – Vue JS


const app = Vue.createApp({
data() { return { fName: ‘’, errors: [ ] } },

methods: {
checkForm: function(e) {
this.errors = [ ]; var result = true;
if ( !this.fName) {
this.errors.push("First name required")
result = false;
}
if (!result)
e.preventDefault(); //prevent form submission
}
}
})
app.mount('#app')
8 - Interface Design and Development, © Swinburne

4
Contents

Form Validation:
– Using HTML 5 Form Attributes

– Using VueJS

– Using Vuetify

9 - Interface Design and Development, © Swinburne

Vuetify
• Complete UI • Material design (https://material.io/)
was created by Google to help teams
framework built on build high-quality digital experiences for
Android, iOS, Flutter, and the web.
top of Vue.js • Material Design is inspired by the
physical world and its textures,
• Vuetify is a Vue UI including how they reflect light and cast
shadows. Material surfaces reimagine
Library with Material the mediums of paper and ink.
design components • There are different components for
creating user interface, such as cards,
floating buttons, app bar, text fields…

10 - Interface Design and Development, © Swinburne

10

5
Vuetify
• https://vuetifyjs.com/

11 - Interface Design and Development, © Swinburne

11

Vuetify - Installation

• To use Vuetify, in the <head> section, use <link>


link to
– Material design icon
– Vuetify css
• Use <script> link to
– vue.js
– vuetify.js

12 - Interface Design and Development, © Swinburne

12

6
Template for VueJS with Vuetify
<!DOCTYPE html>
<html>
<head>
<!-- link to material design -->
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
rel="stylesheet">
<!-- link to vuetify css -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body> The v-app component is a mandatory
<div id="app"> wrapper required for your application to
<v-app> work properly.
<v-main>
<v-container>Hello world</v-container>
</v-main>
</v-app>
</div>
13 - Interface Design and Development, © Swinburne

13

Template for VueJS with Vuetify (continued)

<!-- link to vue js -->


<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- link to vuetify js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js">
</script>

<script>
const { createApp } = Vue
const { createVuetify } = Vuetify
const app = createApp()
const vuetify = createVuetify()
app.use(vuetify).mount('#app')
</script>
</body>
</html>
14 - Interface Design and Development, © Swinburne

14

7
Vuetify Example
<v-container fluid>
<v-btn color="primary" >
<v-icon>mdi-pencil</v-icon> <!-- mdi: material design icon -->
</v-btn>

<v-btn color="error" >


<v-icon>mdi-alarm</v-icon>
</v-btn>
</v-container>

<v-container fluid>
<v-alert type="success">
I'm a success alert.
</v-alert>

<v-alert type="info">
I'm an info alert.
</v-alert>
</v-container>

15 - Interface Design and Development, © Swinburne

15

Vue JS Form Validation


• We can validate forms using custom Vue
logic
• We can also use Vuetify to build custom
rules on each component to validate forms
• We can also use Vue frameworks like Vee-
validate and vuelidate for form validation

16 - Interface Design and Development, © Swinburne

16

8
Using Vuetify for form validation
• Vuetify has a component v-form which makes
it easy to add validation to form inputs.
• All the input components has a rules prop
which accepts a mixed array of types function,
boolean and string .

17 - Interface Design and Development, © Swinburne

17

Vuetify From Validation Example (HTML)


<v-form ref="myForm" method="post"
action="http://mercury.swin.edu.au/it000000/formtest.php">

<v-text-field name="firstName" v-model="firstName"


:rules="nameRules" label="First Name" >
</v-text-field>

<v-text-field name="email" v-model="email" type="email"


:rules="emailRules" label="Email" >
</v-text-field>

<v-btn type="submit" color="success">Submit</v-btn>

</v-form>

18 - Interface Design and Development, © Swinburne

18

9
Vuetify From Validation Example (JS)
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify( )
const app = createApp({
data: () => ({
firstName: '', email: '',
nameRules: [
v => !!v || 'Name required',
v => (v && v.length <= 10) || 'Name must be less than 10
characters’
],
emailRules: [
v => !!v || 'E-mail is required',
v => /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/.test(v) || 'E-
mail must be valid’,
]
})
})
19 - Interface Design and Development, © Swinburne
app.use(vuetify).mount('#app')

19

WHAT’S NEXT?
- API 1

20

10

You might also like