Javascript – Form Validation

Web Technology

Subin Sahayam, Assistant Professor,

Department of Computer Science and Engineering

Shiv Nadar University

• Two parts
• Basic Validation
• Data Validation

K1

Form Validation

• Two parts
• Basic Validation
• Mandatory Fields
• Handling Non-empty
• Data Validation
• Handling specific patterns
• Can Take Place
• Client-Side
• Server-Side

K1

Form Validation

• Client Side Form Validation
• HTML
• Javascript

K1

Form Validation

• HTML
• Forms and Input Element
• HTML Constraint Validation

K1

HTML - Form Validation

• HTML
• Forms and Input Element
• HTML Constraint Validation
• HTML Input Attributes
• CSS Pseudo Selectors
• DOM Properties and Methods

K1

HTML - Form Validation

• HTML
• Forms and Input Element
• HTML Constraint Validation
• HTML Input Attributes

K1

HTML - Form Validation

• Basic Form Validation

<form>

<input type="text" name=“Name" required>

<input type="submit" value="Submit">

</form>

K2

HTML - Form Validation

• Access Elements using DOM – Run Time

<form onsubmit="validate()“name = “Form1” >

<input type="text" name=“Name">

<input type="submit" value="Submit">

</form>

​

<script>

function validate() {

}

</script>

K2

Javascript - Form Validation

K1

Introduction to Document Object Model (DOM)

• Access Elements using DOM – Run Time

<form onsubmit="validate()“name = “Form1” >

<input type="text" name=“Name">

<input type="submit" value="Submit">

</form>

​

<script>

function validate() {if( document. Form1.Name.value == "" ) {

alert( "Please provide your name!" );

document. Form1.Name.focus() ;

return false; }}

</script>

K2

Javascript – Form Validation

Best Practices

1. Use HTML tags with the same case (preferably lowercase).
2. Filename to be based on functionality.
3. When opening a tag, have a "tab space" for each line until you close the tag. It helps in the readability of your HTML document.
4. Give a comment describing a web page as the first line of your HTML document.
5. Keep HTML, CSS, and Javascript files separate.
6. Give meaningful names to identifiers.
7. Identifiers should not be too long or too short (min 3 character length).
8. Add comments on the outermost nested control structure.

K1

• Keywords Updated
• Form Validation Introduction
• HTML Form Validation
• Introduction DOM
• Javascript Form Validation
• Best Practices

K1

Summary

References

​

​

​

​

​

​

1. Paul J Deitel, Harvey M Deitel, and Abbey Deitel, "Internet and the world wide web: How to program," Pearson, Fifth Edition, 2012.

THANK YOU