Scribd
Upload
258 views

Department of Computer Engineering: Develop A Webpage For Validation of Form Fields Using Regular Expressions

The document summarizes an experiment on form validation using JavaScript regular expressions. It provides examples of validating if a form field is empty and validating if a number is within a specified range. The validation is done using JavaScript methods like validateForm(), checkValidity(), and setCustomValidity() along with returning false to prevent submission. The output displays an error message if validation fails, or confirms the input is okay if validation passes.

Uploaded by

Shekhar Jadhav
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
258 views

Department of Computer Engineering: Develop A Webpage For Validation of Form Fields Using Regular Expressions

The document summarizes an experiment on form validation using JavaScript regular expressions. It provides examples of validating if a form field is empty and validating if a number is within a specified range. The validation is done using JavaScript methods like validateForm(), checkValidity(), and setCustomValidity() along with returning false to prevent submission. The output displays an error message if validation fails, or confirms the input is okay if validation passes.

Uploaded by

Shekhar Jadhav
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

DEPARTMENT OF

COMPUTER ENGINEERING

Subject: Client Side Scripting Subject Code: 22519


th
Semester: 5 Course: Computer Engineering
Laboratory No: L001B Name of Subject Teacher: Prof Pokharkar M.S.
Name of Student: Pranit Sudhir Pansare Roll Id:43

Experiment No: 12
Title of Experiment Develop a webpage for validation of form fields using regular
expressions.

Theory:

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:

<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "")
{
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<form name="myForm" action="" onsubmit="return validateForm()" method="post">


Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

Page | 1
Constraint Validation DOM Methods

Property Description

checkValidity() Returns true if an input element contains valid data.

setCustomValidity() Sets the validationMessage property of an input element.

<html>
<body>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>
<p id="demo"></p>
<script>
function myFunction()
{
var inpObj = document.getElementById("id1");
if (!inpObj.checkValidity())
{
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}

Page | 2
else
{
document.getElementById("demo").innerHTML = "Input OK";
}
}
</script>

</body>
</html>

Output:

Grade and P1 (35M) P2 (15 M) Total ( 50 M) Dated Sign


Dated
Signature of
Teacher

Page | 3

You might also like