0

Good day...
I am new to javascript...
I created a simple validation using javascript alone.but my problem is when I press enter the browser aumatically refresh..

this is my code js code..

var validid=false;
var validname=false;
var validaddress=false;
var validzip=false;
var validemail=false;
function idiit()
{
    var uid = document.form1.userid;
    var name = document.form1.username;
    var add = document.form1.address;
    var zipcode = document.form1.zipcode;
    var email = document.form1.email;
    var gender = document.form1.gender;
    if(userid_validation(uid) && validid==true)
    {
       if(allLetter(name) && validname==true)
       {    
       if(alphanumeric(add) && validaddress==true)
        { 
            if(allnumeric(zipcode) && validzip==true)
            {
               if(ValidateEmail(email) && validemail==true)
                {
                    if(validsex(gender))
                    {
                        alert("Thank you!!");
                    }
                } 
            }

        }
       }
    }
}
 function userid_validation(uid)
 {
    var uid_len = uid.value.length;
    if (uid_len == 0)
    {
        document.getElementById("error").style.visibility="visible";
         document.getElementById("id").style.visibility="visible";
        document.getElementById("userid").style.borderColor="red";
        validid=false;
    }
    else
    {
        document.getElementById("check").style.visibility="visible";
        document.getElementById("error").style.visibility="hidden";
        document.getElementById("id").style.visibility="hidden";
        validid=true;
    }
    return validid;
 }
 function allLetter(name)
 { 
    var letters = /^[A-Za-z]+$/;
    if(name.value.match(letters))
    {
        document.getElementById("check1").style.visibility="visible";
        document.getElementById("error1").style.visibility="hidden";
        document.getElementById("nameuser").style.visibility="hidden";
        validname=true;
    }
    else
    {
        document.getElementById("error1").style.visibility="visible";
        document.getElementById("username").style.borderColor="red";
        document.getElementById("nameuser").style.visibility="visible";
        validname=false;
    }
    return validname;
}
function alphanumeric(add)
 { 
    var letters = /^[0-9a-zA-Z]+$/gi;
    if(add.value.match(letters))
    {
       document.getElementById("check2").style.visibility="visible";
        document.getElementById("error2").style.visibility="hidden";
        document.getElementById("location").style.visibility="hidden";
       validaddress=true;
    }
    else
    {
       document.getElementById("error2").style.visibility="visible";
       document.getElementById("location").style.visibility="visible";
        document.getElementById("address").style.borderColor="red";
        validaddress= false;
    }
    return validaddress;
}
function allnumeric(zipcode)
 { 
    var numbers = /^[0-9]+$/;
    if(zipcode.value.match(numbers))
    {
        document.getElementById("check3").style.visibility="visible";
        document.getElementById("error3").style.visibility="hidden";
        document.getElementById("code").style.visibility="hidden";
        validzip=true;
    }
    else
    {
        document.getElementById("error3").style.visibility="visible";
        document.getElementById("zipcode").style.borderColor="red";
        document.getElementById("code").style.visibility="visible";
        validzip=false;
    }
    return validzip;
}
function ValidateEmail(email)
 { 
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(email.value.match(mailformat))
    {
       document.getElementById("check4").style.visibility="visible";
        document.getElementById("error4").style.visibility="hidden";
        document.getElementById("emailadd").style.visibility="hidden";
       validemail=true;
    }
    else
    {
       document.getElementById("error4").style.visibility="visible";
       document.getElementById("emailadd").style.visibility="visible";
        document.getElementById("email").style.borderColor="red";
        validemail= false;
    }
    return validemail;
}
function validsex(gender)
{
    if ( (gender[0].checked == false ) && (gender[1].checked == false ) )
    { 
        return false; 
    } 
    else
    {return true;}
}
function setStyle()
{
    document.getElementById("userid").style.borderColor="blue";
}

this is my html code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript sample registration from validation Code - w3resource</title>
<script type='text/javascript' src="js.js"></script>
</head>
<body>
<fieldset>
    <legend>Registration Form</legend>
<form name='form1' onsubmit="idiit()" method="get">
    <table cellpadding="3">
        <tr>
            <td>User id </td>
            <td><input type="text" name="userid" onfocus="setStyle()"  id="userid"/></td>
            <td><img width="8" height="8" src="img/check.png" id="check"><img width="8" height="8" src="img/error.png" id="error"><span id="id">This is required!</span></td>
        </tr>
        <tr>
            <td>Name</td>
            <td><input type="text" name="username"  onfocus="setStyle()"  id="username"/></td>
            <td><img width="8" height="8" src="img/check.png" id="check1"><img width="8" height="8" src="img/error.png" id="error1"><span id="nameuser">This is required!</span></td>
        </tr>
        <tr>
            <td>Address</td>
            <td><input type="text" name="address"  onfocus="setStyle(this.id)" id="address"/></td>
            <td><img width="8" height="8" src="img/check.png" id="check2"><img width="8" height="8" src="img/error.png" id="error2"><span id="location">This is required!</span></td>
        </tr>
        <tr>
            <td>ZIP Code </td>
            <td><input type="text" name="zip" onfocus="setStyle(this.id)" id="zipcode"/></td>
          <td><img width="8" height="8" src="img/check.png" id="check3"><img width="8" height="8" src="img/error.png" id="error3"><span id="code">This is required!</span></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="text" name="email" onfocus="setStyle(this.id) " id="email"/></td>
           <td><img width="8" height="8" src="img/check.png" id="check4"><img width="8" height="8" src="img/error.png" id="error4"><span id="emailadd">This is required!</span></td>
        </tr>
        <tr>
            <td>Sex</td>
            <td><input type="radio" name="gender" value="Male" /> Male
            <input type="radio" name="gender" value="Female" /> Female</td>
         </tr>
        <tr>
            <td><input type="submit" name="submit" value="Submit" /></td>
            <td><input type="reset" name="reset" value="Reset" /></td>
        </tr>
    </table>
</form>
</fieldset>
</body>
</html>

this is my css code.

table tr td img{visibility: hidden;}
table tr td span{visibility: hidden;}
input{outline: none;}

please help me...
could anybody explain why I got this error??
thnks in advance...

2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by stbuchok
0

For the submit button's onclick event, call all of the validations. If any of them aren't valid, return false to the onlcik event. Returning false will make it so that the page doesn't refresh (doesn't post the data).

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.