ask a javascript for validation form

Darryus · **ask a javascript for validation form -** 09-14-2011, 07:23 AM

hello professor , i would like to ask , why is my javascript not working on another browser besides of google browser?

let's take a look at my script below:

PHP Code:


			
<?php

// Set required fields

$required_fields = array('username','password','rpassword','nama','kota','email','alamat','ponsel');



// set error messages

$error_messages = array(

    'username' => 'harus minimal 4 dan maksimal 10 karakter.',

    'password'=> 'harus minimal 8 dan maksimal 10 karakter.',

    'rpassword'=> 'harus sama dengan password di atas.',

    'nama' => 'Anda harus masukan nama Anda.',

    'kota'=> 'Anda harus masukan nama Kota Anda.',

    'email' => 'ini bukan alamat email.',

    'alamat' => 'Anda harus isi alamat Anda.',

    'ponsel' => 'Anda harus masukan nomer ponsel Anda.');

    





// configure validation array

$validation = array();



if(!empty($_POST)) {

    // Loop into required fields and make sure they match our needs

    foreach($required_fields as $field) {        

        

        

        // check there is information in the field?

        if($_POST[$field] == '') array_push($validation, $field);

        

        // validate the email address supplied

        if($field == 'email') if(!validate_email_address($_POST[$field])) array_push($validation, $field);

    }

    

}

function validate_email_address($email = FALSE) {

    return (preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? TRUE : FALSE;

}





?>















<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Bonus Keren</title>

<link href="registerForm.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>

<script type="text/javascript" src="registerValidation.js"></script>

<script type="text/javascript">

        var usernameError = '<?php echo $error_messages['username']; ?>';

        var emailError = '<?php echo $error_messages['email']; ?>';

        var alamatError = '<?php echo $error_messages['alamat']; ?>';

        var passwordError = '<?php echo $error_messages['password']; ?>';

        var rpasswordError = '<?php echo $error_messages['rpassword']; ?>';

        var namaError = '<?php echo $error_messages['nama']; ?>';

        var kotaError = '<?php echo $error_messages['kota']; ?>';

        var ponselError = '<?php echo $error_messages['ponsel']; ?>';

    </script>

</head>



<body>

<div id="formWrap">

<div id="form">

<form action="register.php" method="post" id="register_form">

<div class="row">

<div class="label">Username</div><!--end .label-->

<div class="input"><input type="text" id="username" class="detail" name="username" value="<?php echo isset($_POST['username'])? $_POST['username'] : ''; ?>"/><?php if(in_array('username', $validation)): ?><span class="error"><?php echo $error_messages['username']; ?></span><?php endif; ?></div><!--end .input-->

<div class="context">contoh: Budi70(minimal 4 karakter dan maksimal 25 karakter dan tidak boleh menggunakan karakter  spasi)</div>

</div><!-- end .row-->

<div class="row">

<div class="label">Password</div><!--end .label-->

<div class="input"><input type="password" id="password" class="detail" name="password" value="<?php echo isset($_POST['password'])? $_POST['password'] : ''; ?>"/><?php if(in_array('password', $validation)): ?><span class="error"><?php echo $error_messages['password']; ?></span><?php endif; ?></div><!--end .input-->

<div class="context">minimal 6 karakter dan maksimal 25 karakter</div>

</div><!-- end .row-->

<div class="row">

<div class="label">Ulangi Password</div><!--end .label-->

<div class="input"><input type="password" id="rpassword" class="detail" name="rpassword" value="<?php echo isset($_POST['rpassword'])? $_POST['rpassword'] : ''; ?>"/><?php if(in_array('rpassword', $validation)): ?><span class="error"><?php echo $error_messages['rpassword']; ?></span><?php endif; ?></div><!--end .input-->

<div class="context">ketik kembali password di atas</div>

</div><!-- end .row-->

<div class="row">

<div class="label">Nama</div><!--end .label-->

<div class="input"><input type="text" id="nama" class="detail" name="nama" value="<?php echo isset($_POST['nama'])? $_POST['nama'] : ''; ?>"/><?php if(in_array('nama', $validation)): ?><span class="error"><?php echo $error_messages['nama']; ?></span><?php endif; ?></div><!--end .input-->

<div class="context">ketik nama Anda(minimal 4 karakter dan maksimal 25 karakter)</div>

</div><!-- end .row-->

<div class="row">

<div class="label">Alamat Lengkap</div><!--end .label-->

<div class="input"><textarea id="alamat" class="mess" name="alamat"><?php echo isset($_POST['alamat'])? $_POST['alamat'] : ''; ?></textarea><?php if(in_array('alamat', $validation)): ?><span class="error"><?php echo $error_messages['alamat']; ?></span><?php endif; ?></div><!--end .input-->

</div><!-- end .row-->

<div class="row">

<div class="label">Kota</div><!--end .label-->

<div class="input"><input type="text" id="kota" class="detail" name="kota" value="<?php echo isset($_POST['kota'])? $_POST['kota'] : ''; ?>"/><?php if(in_array('kota', $validation)): ?><span class="error"><?php echo $error_messages['kota']; ?></span><?php endif; ?></div><!--end .input-->

<div class="context">masukkan nama kota Anda</div>

</div><!-- end .row-->

<div class="row">

<div class="label">Email</div><!--end .label-->

<div class="input"><input type="text" id="email" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>"/><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?></div><!--end .input-->

<div class="context">masukkan email Anda yang aktif</div>

</div><!-- end .row-->

<div class="row">

<div class="label">No.Hp</div><!--end .label-->

<div class="input"><input type="text" id="ponsel" class="detail" name="ponsel" value="<?php echo isset($_POST['ponsel'])? $_POST['ponsel']: '' ; ?>"/><?php if(in_array('ponsel',$validation)): ?><span class="error"><?php echo $error_messages['ponsel']; ?></span><?php endif; ?></div><!--end .input-->

<div class="context">masukkan nomer ponsel Anda yang Aktif</div>

</div><!-- end .row-->

<div class="submit"><input type="submit" id="submit" name="submit" value="Join" /></div><!--end .submit-->

</form>

</div><!--end .form-->

</div><!-- end .formWarp-->

</body>

</html>

Darryus · 09-14-2011, 07:25 AM

this is the registerValidation.js where is related to the php script above:

Code:

// JavaScript Document
window.addEvent('domready', function() {
	// Get the form
	var form = $('register_form');
	
	//  if the form is found...
	if (form) {
		// obtain error fields
		var username = $('username');
		var email = $('email');
		var alamat = $('alamat');

		// Set the default status
		var isValid = true;

		// input error function for the error messages
		var addError = function (field, msg) {
			field.addClass('error'); // Add error class to field
			var error = field.getParent().getElement('span') || new Element('span', {'class': 'error'}); // add error message if not already placed
			error.set('text', msg); // error text msg
			error.inject(field, 'after'); // Insert error message after field
		};

		// detach error function used to delete any error messages and remove the error class
		var removeError = function (field) {
			field.removeClass('error'); // Remove error class from form fields
			var error = field.getParent().getElement('span'); // find any existing error messages

			// destroy if error message
			if (error) {
				error.destroy();
			}
		};

		//  insert submit form event
		form.addEvent('submit', function (e) {
			// Test name length
			if ((username.get('value').length < 4)||(username.get('value').length >10)) {
				isValid = false;
				addError(username, usernameError);
			}
			
			else {
				isValid = true;
				removeError(username);
			}
			
			// Test password length
			if ((password.get('value').length < 8)|| (password.get('value').length > 10)) {
				isValid = false;
				addError(password, passwordError);
			} else {
				isValid = true;
				removeError(password);
			}
			
			// Test rpassword length
			if (rpassword.get('value').length < 6) {
				isValid = false;
				addError(rpassword, rpasswordError);
			} else {
				isValid = true;
				removeError(rpassword);
			}
			// Test rpassword match
			if ((rpassword.get('value'))!= (password.get('value'))) {
				isValid = false;
				addError(rpassword, rpasswordError);
			} else {
				isValid = true;
				removeError(rpassword);
			}
			
			// Test nama length
			if (nama.get('value').length === 0) {
				isValid = false;
				addError(nama, namaError);
			}
			else if (!nama.get('value').test(/^([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}$/)) {
				isValid = false;
				addError(email, emailError);
			}  
			else {
				isValid = true;
				removeError(nama);
			}
			
			// check alamat length
			if (alamat.get('value').length === 0) {
				isValid = false;
				addError(alamat, alamatError);
			} else {
				isValid = true;						
				removeError(alamat);
			}
			
			// Test kota length
			if (kota.get('value').length === 0) {
				isValid = false;
				addError(kota, kotaError);
			} else {
				isValid = true;
				removeError(kota);
			}
			
			// check email length
			if (email.get('value').length === 0) {
				isValid = false;
				addError(email, emailError);
			// check email validity
			} else if (!email.get('value').test(/^([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}$/)) {
				isValid = false;
				addError(email, emailError);
			} else {
				isValid = true;
				removeError(email);
			}
			
			// Test ponsel length
			if (ponsel.get('value').length === 0) {
				isValid = false;
				addError(ponsel, ponselError);
			} else {
				isValid = true;
				removeError(ponsel);
			}


			// If form invalid then stop event happening
			if (!isValid) {
				e.stop();
			}
		});
	}	
});

Passionless · 09-16-2011, 07:01 AM

Hi,
I see that few variables are not defined. Like 'password', 'rpassword' and 'nama'.
So when you do...

password.get('value')

...as password is not defined. Your script stops and the form is sent.

You have to declare the vars..

// obtain error fields
var username = $('username');
var email = $('email');
var alamat = $('alamat');

var password = $('password');
var rpassword =$('rpassword');
var nama = $('nama')

Cya. Good luck.

Darryus · 09-17-2011, 04:50 AM

wow thankss !

your answer is very helpful