HTML表单验证

Question

我创建了一个简单的HTML表单，它将输入作为客户的用户名。它验证它是否确实是有效的用户名。如果是，那么它应该转到step2.php页面，否则它应该显示错误并保留在原始页面上。

这是我的HTML代码：

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

我正在使用javascript函数验证用户名：

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

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

我的问题：

如果用户输入短用户名，则会显示警告消息“用户名太短”。当我在警告信息上按“确定”按钮时，它将转到step2.php。理想情况下，只有在正确验证用户名时，才应将数据发送到step2.php。但这不会发生。

任何人都能在我的代码中找到错误吗？

Answer 1

变化：

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

要：

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

请注意添加关键字return，如果validateUsername返回false，则应取消提交表单。

Answer 2

试试这个。 （在表单中添加返回onsubmit）

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

另外请注意，请确保在步骤2中也通过php验证此问题，因为可以轻松绕过客户端验证。

Answer 3

在调用函数之前添加return：

onsubmit="return validateUsername();"

..或使用event.preventDefault()：

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

Answer 4

首先是你的html表单，不要在表单的onsubmit事件中使用javascript函数之前返回

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

现在javascript函数，如果用户名少于5个字符，则必须只提供一个条件，否则它将不提交表单，否则它将提交表单并将数据发布到step2.php

function validateUsername()

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

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

}

Answer 5

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 : daskoushik9@gmail.com)";
        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 : daskoushik9@gmail.com)';
        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 : daskoushik9@gmail.com)';
        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;}

}