CODEWITHSUNDEEP
javascript
sooraj s pillai
sooraj s pillai

Reputation: 916

Javascript validation error during submit

I had done a simple JavaScript validation for a login form . i don't want error message as alert although i managed to done that but while submitting validation is not working.

function f1() {
    if (document.getElementById("cpassword").value != document.getElementById("password").value) {
        document.getElementById("dis").innerHTML ="*Password not match";
    } else {
        document.getElementById("dis").innerHTML ="*Correct password";
    }
}

function f2() {
    var x = document.forms["form"]["email"].value;
    var atpos = x.indexOf("@");	
    var dotpos = x.lastIndexOf(".");	
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
	
	 {
	 
        document.getElementById("email1").innerHTML = "* Enter a valid e-mail address";
           
      }
	  
	  else
	  
	  {
	  
	   document.getElementById("email1").innerHTML = "";
	   
	  }
	  
    }

function f3()
{
var x =document.getElementById("password").value;
if (x.length <= 5)
{
document.getElementById("pass").innerHTML = "* minimum 6 characters";
}
else
{
document.getElementById("pass").innerHTML = "";
}
}

function f4()
{
var x =document.getElementById("uname").value;

if(x == "")
{
document.getElementById("name").innerHTML = "* fill name";
}
else
{
document.getElementById("name").innerHTML = "";

}
}

</script>
<body>
<table border="0px">


<form action="" method="post" id="form" name="form"  >
<tr>
<td>username</td>
<td><input type="text" name="uname"  id="uname" value="" onblur="f4();"   /></td>
<td><div style="color:#FF0000" id="name" > </div></td>
</tr>
</br>
</br>
<tr>
<td>password</td>
<td><input type="password" name="password"  id="password" value="" onblur="f3();"  /></td>
<td><div style="color:#FF0000" id="pass" > </div></td>

</tr>
</br>
</br>
<tr>
<td>confirm password</td>
<td><input type="password" name="cpassword"  id="cpassword" value="" onblur="f1();"  /></td>
<td><div style="color:#FF0000" id="dis" > </div></td>
<td><div style="color:#FF0000" id="dis1" > </div></td>
</tr>
</br>
</br>
<tr>
<td> email</td>
<td><input type="text" name="email" id="email" value="" onblur="f2();"   />    </td>
<td><div style="color:#FF0000" id="email1" > </div></td>

</tr>
<tr>
<td><input type="submit" value="submit" name="submit" onsubmit="f1();" onsubmit="f2();" onsubmit="f3();" /></td>
<!--<td><input type="button" value="submit" name="submit" onclick="f2();" onclick="f1();" onclick="f3();" onclick="f4();"/></td>-->
</tr>
</form>

</table>

</body>

these are my code help please i had no knowledge in js

Upvotes: 0

Views: 219

Answers (3)

kenz
kenz

Reputation: 112

Create one function to call all your functions:

function validate() {
    f1();
    f2();
    f3();
}

Also change the HTML line

<form method="post" id="form" name="form"  onsubmit="validate();">

And remove onsubmit() from input tag

<td><input type="submit" value="submit" name="submit" /></td>

Upvotes: 1

Naman
Naman

Reputation: 1527

You're using onsubmit call on a input element, that's why it is not working. Use onsubmit on form element like follows:

<form action="" method="post" id="form" name="form" onsubmit="f1();f2();f3();">

& remove onsubmit from your <input type="submit"..> button. Moreover, you can't use one attribute many times in single element.

Working one:

    function f1() {
        if (document.getElementById("cpassword").value != document.getElementById("password").value) {
            document.getElementById("dis").innerHTML ="*Password not match";
        } else {
            document.getElementById("dis").innerHTML ="*Correct password";
        }
    }

    function f2() {
        var x = document.forms["form"]["email"].value;
        var atpos = x.indexOf("@");	
        var dotpos = x.lastIndexOf(".");	
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
    	
    	 {
    	 
            document.getElementById("email1").innerHTML = "* Enter a valid e-mail address";
               
          }
    	  
    	  else
    	  
    	  {
    	  
    	   document.getElementById("email1").innerHTML = "";
    	   
    	  }
    	  
        }

    function f3()
    {
    var x =document.getElementById("password").value;
    if (x.length <= 5)
    {
    document.getElementById("pass").innerHTML = "* minimum 6 characters";
    }
    else
    {
    document.getElementById("pass").innerHTML = "";
    }
    }

    function f4()
    {
    var x =document.getElementById("uname").value;

    if(x == "")
    {
    document.getElementById("name").innerHTML = "* fill name";
    }
    else
    {
    document.getElementById("name").innerHTML = "";

    }
    }
    <body>
    <table border="0px">


    <form method="post" id="form" name="form"  onsubmit="f1();f2();f3();">
    <tr>
    <td>username</td>
    <td><input type="text" name="uname"  id="uname" value="" onblur="f4();"   /></td>
    <td><div style="color:#FF0000" id="name" > </div></td>
    </tr>
    <tr>
    <td>password</td>
    <td><input type="password" name="password"  id="password" value="" onblur="f3();"  /></td>
    <td><div style="color:#FF0000" id="pass" > </div></td>
    </tr>
    <tr>
    <td>confirm password</td>
    <td><input type="password" name="cpassword"  id="cpassword" value="" onblur="f1();"  /></td>
    <td><div style="color:#FF0000" id="dis" > </div></td>
    <td><div style="color:#FF0000" id="dis1" > </div></td>
    </tr>
    <tr>
    <td> email</td>
    <td><input type="text" name="email" id="email" value="" onblur="f2();"   />    </td>
    <td><div style="color:#FF0000" id="email1" > </div></td>

    </tr>
    <tr>
    <td><input type="submit" value="submit" name="submit"/></td>
    </tr>

Hope, that works.

Upvotes: 4

Vivek Parmar
Vivek Parmar

Reputation: 771

when you set the wrapping to "onblur" , the functions you define are only defined inside that block, and cannot be accessed by outside event handlers.

Easiest fix is to change:

function f4(...) To:

window.f4 = function(...)

Hope that helps you

Upvotes: 0

Related Questions