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...

Member Avatar for stbuchok

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).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.