CODEWITHSUNDEEP
phpjavascripthtmlforms
sumit
sumit

Reputation: 11257

HTML form validation

I created a simple HTML form which takes input as username of the customer. It validates if it is indeed a valid username or not. If yes then it should go to the step2.php page if not then it should display an error and stay on the original page.

Here is my HTML code:

<form method="post" onsubmit="validateUsername();" id="myform" name="myform" action="step2.php">
      Choose username: <input type="text" id="username" name="username" />
      <input type="submit" value="Submit">
</form>

I am validating username by using a javascript function:

function validateUsername()
{
    var x=document.forms["myform"]["username"].value.length;

    if (x < 5)
    {
        alert('Username too short.');
        return false;
    }
    else
    {
        return true;
    }
}

My problem:

If the user enters a short username then it displays an alert message "Username too short". When I press "OK" button on alert message then it is going to step2.php. Ideally it should send data to step2.php only when username is validated correctly. But this is not happening.

Anyone able to find the bug in my code?

Upvotes: 2

Views: 433

Answers (5)

Tapas Saha
Tapas Saha

Reputation: 1

function validation(){

    var eid=$.trim($('#email').val());
   var password=$.trim($('#password').val());
    var emailval =/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z])+/;
   var con=/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;

   var errmsg='';
   var c=0;
   var cur_el='';
   if(eid=='' || eid==null)
   {
       errmsg="enter your email";
       cur_el=$('#email');
       c=1;
   }
   else if (!emailval.test(eid)) {
        errmsg="Please provide a valid email address (hints : [email protected])";
        cur_el=$('#email');
        c=1;
    }

    else if(password=='')
    {
        errmsg="enter password";
        cur_el=$('#password');
        c=1;
      }
      else if(password.length<4)
    {
        errmsg="password is too short";
        cur_el=$('#password');
        c=1;
      }
       if(c==1 && errmsg!=''){
         alert(errmsg);
         cur_el.focus();
         return false;
     }   
     else 
         {return true;}
}
function adminprofilevalidation(){
    var ad_uname=$.trim($('#admin_username').val());
    var ad_oldpass=$.trim($('#admin_passo').val());
   var ad_newpass=$.trim($('#admin_pass').val());
   var ad_repass=$.trim($('#admin_passc').val());
   var ad_email=$.trim($('#admin_email').val());
//    var eid=$.trim($('#email').val());
//   var password=$.trim($('#password').val());
  //  var cpassword=$.trim($('#cpassword').val());
//   var file=$('#file').val();

   var errmsg='';
   var c=0;
   var cur_el='';
   //var em=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
   var alphaExp = /^[a-zA-Z]+$/;
//   var alphaNum = /^[0-9a-zA-Z]+$/;
//   var digit = /^[0-9]+$/;
//   var fdigit=/^[0]+$/;
   var emailval = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z])+/;
   var con=/^\(?([0-9]{2})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;

   if(ad_uname=='' || ad_uname==null)
    {   
        errmsg="Enter User name";
        cur_el=$('#admin_username');
        c=1;
    }
    else if(!ad_uname.match(alphaExp)){
        errmsg="Please enter only letters for your name";
        cur_el=$('#firstname');
        c=1;
    }
    else if(ad_oldpass=='' || ad_oldpass==null)
    {
        errmsg="enter Old password";
        cur_el=$('#admin_passo');
        c=1;
    } else if(ad_oldpass.length<4)
    {
        errmsg="password is too short";
        cur_el=$('#admin_passo');
        c=1;
      }

      else if(ad_newpass=='' || ad_newpass==null)
    {
        errmsg="please enter new password";
        cur_el=$('#admin_pass');
        c=1;
    }
    else if(ad_newpass.length<4)
    {
        errmsg="password is too short";
        cur_el=$('#admin_pass');
        c=1;
      }
     else if(ad_repass=='' || ad_repass==null)
    {
        errmsg="please re enter the password";
        cur_el=$('#admin_passc');
        c=1;
    } 
    else if(ad_repass.length<4)
    {
        errmsg="password is too short";
        cur_el=$('#admin_passc');
        c=1;
      }




    else if(ad_email=='' || ad_email==null)
   {
       errmsg="Enter your email";
       cur_el=$('#admin_email');
       c=1;
   }
   else if (!emailval.test(ad_email)) {
        errmsg='Please provide a valid email address (hints : [email protected])';
        cur_el=$('#admin_email');
        c=1;
    }




     if(c==1 && errmsg!=''){
         alert(errmsg);
         cur_el.focus();
         return false;
     }   
     else 
         {return true;}


}


function companyprofilevalidation(){
    var co_name=$.trim($('#company_name').val());
    var co_pcntact=$.trim($('#company_contact_person').val());
   var co_add=$.trim($('#company_address').val());
   var co_phn=$.trim($('#company_phone').val());
   var co_email=$.trim($('#company_email').val());


   var errmsg='';
   var c=0;
   var cur_el='';
   //var em=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
   var alphaExp = /^[a-zA-Z]+$/;
//   var alphaNum = /^[0-9a-zA-Z]+$/;
          var digit = /^[0-9]+$/;
         var fdigit=/^[0]+$/;
   var emailval = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z])+/;
   var con=/^\(?([0-9]{2})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;

   if(co_name=='' || co_name==null)
    {   
        errmsg="Enter Company name";
        cur_el=$('#company_name');
        c=1;
    }

    else if(co_pcntact=='' || co_pcntact==null)
    {
        errmsg="enter Person Contact name";
        cur_el=$('#company_contact_person');
        c=1;
    } 

      else if(co_add=='' || co_add==null)
    {
        errmsg="please enter company address";
        cur_el=$('#company_address');
        c=1;
    }

     else if(co_phn=='' || co_phn==null)
    {
        errmsg="please enter company phone no";
        cur_el=$('#company_phone');
        c=1;
    } 
      else if(fdigit.test(co_phn)){
         errmsg="first digit must be non zero";
         cur_el=$('#company_phone');      
         c=1;
      }
        else if(co_phn.length<10)
    {
        errmsg="please give 10 digit no";
        cur_el=$('#company_phone');
        c=1;
      }




    else if(co_email=='' || co_email==null)
   {
       errmsg="Enter your email";
       cur_el=$('#company_email');
       c=1;
   }
   else if (!emailval.test(co_email)) {
        errmsg='Please provide a valid email address (hints : [email protected])';
        cur_el=$('#company_email');
        c=1;
    }



     if(c==1 && errmsg!=''){
         alert(errmsg);
         cur_el.focus();
         return false;
     }   
     else 
         {return true;}

//    else if(file=='')
//        {
//            errmsg="upload your photo";
//            cur_el=$('#uploadfile');
//            c=1;
//        }
//        else if(fdigit.test(phone)){
//         errmsg="first digit must be non zero";
//         cur_el=$('#phone');
//          c=1;
//        }
}


function jobaddvalidation(){


   var errmsg='';
   var c=0;
   var cur_el='';
   //var em=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
   var alphaExp = /^[a-zA-Z]+$/;
//   var alphaNum = /^[0-9a-zA-Z]+$/;
          var digit = /^[0-9]+$/;
         var fdigit=/^[0]+$/;
   var emailval = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z])+/;
   var con=/^\(?([0-9]{2})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;

   var jtitle=$.trim($('#job_title').val());
    var jsummery=$.trim($('#job_summery').val());
   // var jdescription=$.trim($('#job_description').val());
    var cid=$.trim($('#category_id').val());
    var jreq=$.trim($('#job_requirements').val());
    var jcdetails=$.trim($('#job_contact_details').val());
    var jcpname=$.trim($('#job_contact_person_name').val());
    var jcpemail=$.trim($('#job_contact_person_email').val());
    var jacdetails=$.trim($('#job_additional_contact_details').val());
     var jscopy='';
        if(document.form1.job_scan_copy.checked){
        jscopy=$.trim($('#job_scan_copy').val());
    }

    var jnscopy='';
    jnscopy=$.trim($('#job_no_scan_copy').val());
    var jloc=$.trim($('#job_location').val());
    var jctc=$.trim($('#job_ctc').val());
    var jureq=$.trim($('#job_upload_requirement').val());

    if(jtitle==null || jtitle=='')
    {
        errmsg="please give job title";
        cur_el=$('#job_title');
        c=1;
    }else if(jsummery==null || jsummery=='')
    {
        errmsg="please give job summery ";
        cur_el=$('#job_summery');
        c=1;
    }
//    else if(jdescription==null || jdescription=='')
//    {
//        errmsg="please mention job description";
//        cur_el=$('#job_description');
//        c=1;
//   }
   else if(cid==null || cid=='')
    {
        errmsg="please give category name";
        cur_el=$('#category_id');
        c=1;
    }else if(jreq==null || jreq=='')
    {
        errmsg="please give job requirement";
        cur_el=$('#job_requirements');
        c=1;
    }

    else if(jcdetails==null || jcdetails=='')
    {
        errmsg="please give job contact details";
        cur_el=$('#job_contact_details');
        c=1;
    }else if(jcpname==null || jcpname=='')
    {
        errmsg="please give job contact person name";
        cur_el=$('#job_contact_person_name');
        c=1;
    }else if(jcpemail==null || jcpemail=='')
    {
        errmsg="please give job contact person email";
        cur_el=$('#job_contact_person_email');
        c=1;
    }else if(!emailval.test(jcpemail))
    {
        errmsg="please give valid job contact person email";
        cur_el=$('#job_contact_person_email');
        c=1;
    }else if(jacdetails==null || jacdetails=='')
    {
        errmsg="please give job additional contact details";
        cur_el=$('#job_additional_contact_details');
        c=1;
    }else if((jscopy!='' && jnscopy=='') || (jscopy=='' && jnscopy!=''))
    {
        errmsg="please give both scan copy and no scan copy OR both un select";
        cur_el=$('#job_scan_copy');
        c=1;
    }else if(jloc==null || jloc=='')
    {
        errmsg="please mention job location";
        cur_el=$('#job_location');
        c=1;
    }else if(jctc==null || jctc=='')
    {
        errmsg="please mention job C T C";
        cur_el=$('#job_ctc');
        c=1;
    } 



     if(c==1 && errmsg!=''){
         alert(errmsg);
         cur_el.focus();
         return false;
     }   
     else 
         {return true;}

}

Upvotes: 0

user1414232
user1414232

Reputation:

First your html form, do not use return before javascript function in onsubmit event of form

<form method="post" onsubmit="validateUsername();" id="myform" name="myform"      action="step2.php">
  Choose username: <input type="text" id="username" name="username" />
  <input type="submit" value="Submit">

Now javascript function, you have to give only one condition if username is less then 5 char it will not submit form otherwise it will submit form and post data to step2.php

function validateUsername()

{ var x=document.myform.username.value.length;

if (x < 5)
{
    alert('Username too short.');
    return false;
}

}

Upvotes: 0

Adonais
Adonais

Reputation: 1292

Add return before calling the function:

onsubmit="return validateUsername();"

..or use event.preventDefault():

onsubmit="if(!validateUsername()) event.preventDefault();"

Upvotes: 2

SiN
SiN

Reputation: 3754

Try this. (Add return to onsubmit in the form)

<form method="post" onsubmit="return validateUsername();" id="myform" name="myform" action="step2.php">
      Choose username: <input type="text" id="username" name="username" />
      <input type="submit" value="Submit">
</form>

Also on another note, make sure you also validate this trough php in step2, since client-side validation can be easily bypassed.

Upvotes: 3

Ivan
Ivan

Reputation: 10372

Change:

<form method="post" onsubmit="validateUsername();" id="myform" name="myform" action="step2.php">
      Choose username: <input type="text" id="username" name="username" />
      <input type="submit" value="Submit">
</form>

To:

<form method="post" onsubmit="return validateUsername();" id="myform" name="myform" action="step2.php">
      Choose username: <input type="text" id="username" name="username" />
      <input type="submit" value="Submit">
</form>

Note the addition of the keyword return which should cancel the form from submitting if validateUsername returns false.

Upvotes: 4

Related Questions