|
|
In HTML, JavaScript (a client side scripting language) code must be inserted between
<script> and </script> tags.
The <script> element either contains
scripting statements, or it can point to an external script file through the
src attribute. The script file has an extension of .js. The most common uses of
JavaScript on a webpage are image manipulation, Javascript form validation, dynamic
changes of content and so on.
To use the JavaScript Form Validation we select an HTML element, JavaScript very often
use the document.getElementById(test) method which means find an HTML element
with an id of test and change the element content .
document.getElementById("test").innerHTML = "Hello JavaScript";
Most often, the purpose of Javascript form validation is to
ensure correct user input provided by the user. 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.
The client side form validation means checking a
web form to make sure that all data entered by the user in different form
fields are in correct form before the form is send to the web server. All the
checking is performed in the web browser by JavaScript.
When it comes to validating form values, it can
be done on the client-side (web browser) or on the server-side (using any
server-side language like PHP, ASP.Net etc). In the past, client-side
validation could only be achieved using JavaScript or using libraries from
frameworks (jQuery validation plugin). If you want to learn how to use a Jquery Horizontal Accordion you can learn that from here.
Client-side validation is validation that occurs
in the browser, before the data has been submitted to the server. JavaScript form validation is more user-friendly than server-side validation as it gives an
instant response. The code for Javascript form validation example is as under which you can copy and paste it in your favourite HTML Editor and start the Javascript form validation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Validation using JavaScript</title>
<style>
body{
background-color: orange;
}
input[type="text"],input[type="email"],input[type="submit"]{
height: 30px;
width:300px;
}
</style>
</head>
<body>
<form align="center" action="Validation.html" onsubmit="return check()">
<p><label for ="name">Name</label></p>
<p><input type="text" name="name" id="name"></p>
<p><label for ="address">Address</label></p>
<p><input type="text" name="address" id="address"></p>
<p><label for ="email">Email</label></p>
<p><input type="email" name="email" id="email"></p>
<p><input type="submit" value="Signup!"></p>
</form>
<script>
function check(){
var name=document.getElementById('name').value;
var address=document.getElementById('address').value;
var email=document.getElementById('email').value;
if(!name){
alert("Name can not be left blank");
return false;
}
else if (!address){
alert("Address can not be left blank");
return false;
}
else if(!email){
alert ("Email can not be left blank");
return false;
}
}
</script>
</body>
</html>
0 comments:
Post a Comment