validation form in table mode with javascript

Question

i made my form in table mode like this:

<form name="register" method="post" action="#" onSubmit="return validasi()">         
    <table width="507" border="0">
      <h1 class="title"><a href="#">Form Perubahan Password</a></h1>
        <tr>
          <td width="190" ><span id="usernameerror" class="style20">Masukkan Username </span></td>
          <td width="319"><input name="username" type="text"></td>
        </tr>
        <tr>
          <td><span id="passworderror" class="style20">Masukkan Password Lama</span></td>
          <td><input name="pass" type="password"></td>
        </tr>
        <tr>
          <td><span id="password1error" class="style20">Masukkan Password Baru</span></td>
          <td><input name="pass1" type="password"></td>
        </tr>
        <tr>
          <td><span id="password2error" class="style20">Ulangi Masukkan Password Baru</span></td>
          <td><input name="pass2" type="password"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><input type="submit" name="Submit" value="Submit">
          <input type="reset" name="reset" value="Reset"></td>
        </tr>
      </table>
    </form>

and this my validation code with javascript. check it out..

<script language="javascript">
 function checkName(register)

    {
        var eobj = document.getElementById('usernameerror');        
        var susername = register.username.value;        
        var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;        
        var error = false;        
        eobj.innerHTML = '';        
        if (susername == '') {

            error = 'Error: Username tidak boleh kosong';        
            register.username.focus();
        }
         else if (!oRE.test(susername))  

    {  
      error="Salah format";  
    }  
        if (error)        
        {
            register.username.focus();        
            eobj.innerHTML = error;        
            return false;
        }        
        return true;
    }
    function validatePwd(register) /* old password verification */
    {
        var eobj = document.getElementById('passworderror');
        var invalid = ' ';
        var pw = register.pass.value;
        var error = false;
        eobj.innerHTML = '';
        if (pw.length < 1)

        {
            error = 'Masukkan password anda';
        } 
        else if (pw.indexOf(invalid) > -1)
        {
            error = 'Anda harus mengisi password';
        }
        if (error)
        {
            register.pass.focus();
            eobj.innerHTML = error;
            return false
        }
           return true;
    }
    function validatePwd1(register) /* password & retype-password verification */

    {

        var eobj1 = document.getElementById('password1error');        
        var eobj2 = document.getElementById('password2error');        
        var invalid = ' ';        
        var pw1 = register.pass1.value;        
        var pw2 = register.pass2.value;        
        var error = false;        
        eobj1.innerHTML = '';        
        eobj2.innerHTML = '';        
        if (pw1.length < 1)

        {
              error = 'Masukkan password anda';

        } 
        else if (pw1.indexOf(invalid) > -1)

        {
              error = 'Anda harus mengisi password';

        }        
        if (error)

        {

            register.pass1.focus();        
            eobj1.innerHTML = error;        
            return false

        }

        if (pw1 != pw2)

        {
                    eobj2.innerHTML = ' password tidak sama, coba masukkan kembali password anda';        
            return false;

        }
                return true;

    }


    function validasi()

    {

        var form = document.forms['register'];        
        var ary = [checkName, validatePwd, validatePwd1];        
        var rtn = true;        
        var z0 = 0;        
        for (var z0 = 0; z0 < ary.length; z0++)

        {        
            if (!ary[z0](form))

            {        
                rtn = false;        
            }        
        }
        return rtn;
         }
</script>

When i use this validation in usually form its work But in table mode that's validation code doesn't work..help me to solve this problem...tq

view demo http://jsfiddle.net/andricoga/u9eZz/

You should use pure PHP for validation on server-side. Javascript can be modified by a user. (Especially for what you're using it for). — Funk Forty Niner
– Funk Forty Niner, Commented Mar 18, 2013 at 4:38

Devang Rathod · Accepted Answer · 2013-03-18 04:42:29Z

1

You have declared onSubmit="return validasi()" in form , but where you defined function for that. for validation working you need to define function for that.

function validasi(){
   // validation code goes here
}

answered Mar 18, 2013 at 4:42

Devang Rathod

6,7342 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

newbie Over a year ago

yeah that's rigth but still not working check it in jsfiddle.net/andricoga/x8Vdw/5

newbie Over a year ago

i modify this script from this blog mangulsource.blogspot.com/2012/04/… maybe i give you opportunity to study Indonesian language :)

C3roe Over a year ago

No the error is "ReferenceError: eobj1 is not defined" – your function validatePwd has an object called eobj, but not eobj1. Please use to learn your browser’s frigging error console!

Aamir Syed · Accepted Answer · 2013-03-18 10:02:56Z

1

In your validatePwd() function replace

eobj1.innerHTML = error;

with

eobj.innerHTML = error;

you have not defined this eobj1 object and hence it is causing a run time javascript error.

answered Mar 18, 2013 at 10:02

Aamir Syed

1315 bronze badges

Comments

Amro · Accepted Answer · 2013-03-19 09:31:05Z

I changed the code to display the error beside the field, try this out

Javascript

<script language="javascript">

function checkName()

    {
        var obj = document.getElementById('usernameerror');        
        var susername = document.getElementById('username').value;        
        var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;        
        var error = false;        
        obj.innerHTML = ''; 

        if (susername == '') {

            error = 'Username can not be empty';        

        }
         else if (!oRE.test(susername))  

    {  
      error = 'One format';  
    }  
        if (error)        
        {
            document.getElementById('username').focus();        
            obj.innerHTML = error;        
            return false;
        }        
        return true;
    }



function validatePwd() /* password & retype-password verification */
    {
        var obj = document.getElementById('pwderror');
        var invalid = ' ';
        var pw = document.getElementById('pass').value;
        var error = false;
        obj.innerHTML = '';

        if (pw.length < 1)

        {
            error = 'Enter your old password';
        } 
        else if (pw.indexOf(invalid) > -1)
        {
            error = 'You need a password';
        }
        if (error)
        {
            document.getElementById('pass').focus();
            obj.innerHTML = error;
            return false
        }
           return true;
    }


function validatePwd1() /* password & retype-password verification */

    {

        var obj = document.getElementById('pwd1error');                
        var invalid = ' ';        
        var pw1 = document.getElementById('pass1').value;        
        var pw2 = document.getElementById('pass2').value;      
        var error = false;        
        obj.innerHTML = '';        

        if (pw1.length < 1)

        {
              error = 'Enter your new password';

        } 
        else if (pw1.indexOf(invalid) > -1)

        {
              error = 'You need a password';

        }        
        if (error)

        {

            document.getElementById('pass1').focus();        
            obj.innerHTML = error;        
            return false

        }

        if (pw1 != pw2)

        {
                    obj.innerHTML = 'passwords are not the same, try to re-enter your password';        
            return false;

        }
                return true;

    }


function validate()

    {

        var form = document.forms['register'];        
        var ary = [checkName, validatePwd, validatePwd1];        
        var rtn = true;        
        var z0 = 0;        
        for (var z0 = 0; z0 < ary.length; z0++)

        {        
            if (!ary[z0](form))

            {        
                rtn = false;        
            }        
        }
        return rtn;
         }

</script>

Form

<form name="register" method="post" action="#" onSubmit="return validate()">         
    <table border="0">
    <tr>
    <td colspan="2">
      <h1 class="title"><a href="#">Password Change Form</a></h1>
    </td>
    </tr>
        <tr>
          <td><span class="style20">Username </span></td>
          <td><input name="username" id="username" type="text"></td>
      <td><span id="usernameerror" class="style20">&nbsp;</span></td>
        </tr>
        <tr>
          <td><span class="style20">Old Password</span></td>
          <td><input name="pass" id="pass" type="password"></td>
      <td><span id="pwderror" class="style20">&nbsp;</span></td>
        </tr>
        <tr>
          <td><span class="style20">New Password</span></td>
          <td><input name="pass1" id="pass1" type="password"></td>
      <td><span id="pwd1error" class="style20">&nbsp;</span></td>
        </tr>
        <tr>
          <td><span class="style20">Repeat New Password</span></td>
          <td><input name="pass2" id="pass2" type="password"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><input type="submit" name="Submit" value="Submit">
          <input type="reset" name="reset" value="Reset"></td>
        </tr>
      </table>
</form>

yeah it's work, there is another problem that error meesage hide the form content.. how to manage the position of the error message?
sory it's mean new column like this<td><span id="pwd1error" class="style20"> </span></td>

Collectives™ on Stack Overflow

validation form in table mode with javascript

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related