2011-12-29 8 views
2

私は顧客のユーザー名として入力をとる単純な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関数を使用してユーザー名を検証しています:ここで

は私のHTMLコードです

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

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

私の問題:ユーザーが短いユーザ名を入力

場合「Username too short」という警告メッセージが表示されます。警告メッセージで「OK」ボタンを押すと、step2.phpに進みます。理想的には、ユーザー名が正しく検証された場合にのみ、step2.phpにデータを送信する必要があります。しかし、これは起こっていない。

誰かが私のコードでバグを見つけることができますか?

+0

私は(あまりJavaScriptを使用していない)覚えていないが、私はあなたが防ぐために、送信ボタンの 'onclick'トリガーにチェックを入れて持っていると思いますフォームから提出する。 – animuson

+0

@animuson:Enterを押しても同様のフォームを送信できます。 – Ivan

答えて

4

変更:

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

validateUsernameが偽提出からフォームをキャンセルすべきキーワードreturnの追加。

3

これを試してください。クライアント側の検証を簡単にバイパスすることができるので、あなたはまた、STEP2で、このトラフのphpを検証することを確認し、別のノートにも

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

を(フォームでのonSubmitするリターンを追加します)。

onsubmit="return validateUsername();" 

..or使用event.preventDefault()

+0

こんにちはSiN、私はサーバー側でも検証しています。ありがとう:) –

+0

良い良い。修正があなたのために働く場合は、正しい答えとしてIvanの答えをマークしてください。彼は早く答えます。ありがとう – SiN

2

関数を呼び出す前にreturnを追加

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

まず、あなたの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関数、あなたは= usernameは、それがフォームを送信しませんchar型5その後、小さければ、それ以外の場合は

function validateUsername() 

{ VAR xをstep2.phpするフォームポストデータを提出する1つの条件のみを与えなければなりませんdocument.myform.username.value.length;

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

}

+0

あなたは onclickイベントでjavascipt関数を呼び出すこともできます – utsav

0
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_.-])[email protected]([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_.-])[email protected]([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_.-])[email protected]([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;} 

} 
+0

説明を追加してください –