Scribd
Upload
2 views

Unit3 JS Form Validation

The document discusses data validation, which ensures user input is clean and correct, highlighting typical tasks such as checking for required fields and valid dates. It explains the difference between server-side and client-side validation, with a focus on JavaScript for HTML form validation. Examples of JavaScript functions for validating empty fields and numeric input are provided to illustrate the concepts.

Uploaded by

srishtiarora0110
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Unit3 JS Form Validation

The document discusses data validation, which ensures user input is clean and correct, highlighting typical tasks such as checking for required fields and valid dates. It explains the difference between server-side and client-side validation, with a focus on JavaScript for HTML form validation. Examples of JavaScript functions for validating empty fields and numeric input are provided to illustrate the concepts.

Uploaded by

srishtiarora0110
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

JavaScript: Basic

validation
2 Data Validation
 Data validation is the process of ensuring that user input is clean, correct,
and useful.
 Typical validation tasks are:
• has the user filled in all required fields?
• has the user entered a valid date?
• has the user entered text in a numeric field?
 Most often, the purpose of data validation is to ensure correct user input.
 Validation can be defined by many different methods, and deployed in
many different ways.
 Server side validation is performed by a web server, after input has
been sent to the server.
 Client side validation is performed by a web browser, before input is
sent to a web server.

Dr. Anupama Jha


JavaScript Form Validation
3

 HTML form validation can be done by JavaScript.


 If a form field (fname) is empty, this function alerts
a message, and returns false, to prevent the form
from being submitted:

Dr. Anupama Jha


<html><head>
<script>
4 function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
x.focus();
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="" onsubmit="validateForm()" >
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

Dr. Anupama Jha


5

Dr. Anupama Jha


JavaScript Can Validate Numeric Input
6

 JavaScript is often used to validate numeric input:

Dr. Anupama Jha


<html><body>
<h2>JavaScript Validation</h2>
<form name="myForm">
7 <p>Please input a number between 1 and 10:</p>
<input type="text" name="name">
<button type="button" onclick="myFunction()">Submit</button>
</form>

<script>
function myFunction() {
// Get the value of the input field with name="numb"
let x = myForm.name.value;
let text;
//isNaN() returns true if a value is NaN not a number
if (isNaN(x) || x< 1 || x > 10)
{
text = "Input not valid";
}
else
{
text = "Input OK";
}
document.write(text);
Dr. Anupama Jha
}
</script></body></html>

You might also like