Home > Client Side Scripting > Validasi Form Dengan Javascript

Validasi Form Dengan Javascript

November 17, 2013 Leave a comment Go to comments

Berikut ini trivia untuk validasi form. Dimana input field form tidak boleh kosong, email field valid, dsb.

Javascript form validation code :

<script language="javascript">

function isNumericKey(evt){
var charCode = (evt.which)? evt.which : evt.keyCode;
if(charCode > 31 && (charCode <48 || charCode >57))
return false;

return true;
}

function formValidation(){

document.getElementById("errorMessage").value="";
var name = document.forms["logIn"]["name"].value;
var email = document.forms["logIn"]["email"].value;
var pnumber= document.forms["logIn"]["pnumber"].value;
var password = document.forms["logIn"]["password"].value;
var rpassword = document.forms["logIn"]["rpassword"].value;

if(name == null || name==""){
document.getElementById("errorMessage").value= document.getElementById("errorMessage").value + "\n Please enter Name";
return false;}

if(pnumber == null || pnumber=="") {
document.getElementById("errorMessage").value= document.getElementById("errorMessage").value + "\n Please enter Phone Number";
return false; }

if(email == null || email==""){
document.getElementById("errorMessage").value= document.getElementById("errorMessage").value + "\n Please enter Email";
return false; }

if(email != ""){
bool = emailValidation(email);
return bool; }

if(password  == null || password ==""){
document.getElementById("errorMessage").value= document.getElementById("errorMessage").value + "\n Please enter Password";
return false;}

if(rpassword  == null || rpassword ==""){
document.getElementById("errorMessage").value= document.getElementById("errorMessage").value + "\n Please enter Re-password";
return false; }

if( password != rpassword){
document.getElementById("errorMessage").value= document.getElementById("errorMessage").value + "\n Password mismatch";
return false; }

return true;
}

function emailValidation(emailIn){

email = emailIn;
var atpos = email.indexOf("@");
var dotpost = email.lastIndexOf(".");
if( atpos <1 ||  dotpos < atpos+2  || dotpos+2 >= email.length)
document.getElementById("errorMessage").value= document.getElementById("errorMessage").value + "\n Invalid Email";
return false;

}
</script>

contoh html code:


<form name="logIn" method="post" onsubmit="return formValidation()">
<label for="lbl_name"> Name </lable>
<input type="text" name="name" id="name"> </br>
<label for="lbl_pnumber">Phone Number </lable>
<input type="text" name="pnumber" id="pnumber" onkeypress="return isNumericKey(event)"> </br>
<label for="lbl_email"> Email </lable>
<input type="text" name="email" id="email"> </br>
<label for="lbl_password"> Password </lable>
<input type="text" name="password" id="password"> </br>
<label for="lbl_rpassword">Re-type Password </lable>
<input type="text" name="rpassword" id="rpassword"></br>
<input type="submit" name="submit" value="Submit"> </br>
<textarea row="10" cols="50" id="errorMessage" disabled="true" style="color:red">
</textarea>
</form>

Semoga bermanfaat.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: