jquery関数がフォームの検証に機能しません

jQueryを使用してマルチステップフォームを作成しようとしています。続きjquery関数がフォームの検証に機能しません

は私のコードです：

<div id="div1"> 
<form> 
<label>Username</label><input type="text" id="username"></input> 
<label>Password</label><input type="text" id="password"></input> 
</form> 
<a href="#" class="next">NEXT</a> 
</div> 

<div id="div2"> 
<p>Content of Div 2</p> 
</div>

マイJS：

function showdiv2(){ 
$("#div1").hide(); 
$("#div2").show(); 
} 

function validateuser(){ 
var username = $("#username").val().length; 
if (username >5 && username<20) 
    errorUser =false; 
} 

function validatePassword(){ 
var password = $("#password").val().length; 
if (password>8 && password<20) 
    errorPassword =false; 
} 

$('.next').click(function(){ 
    var errorUser = false; 
    var errorPassword = false; 

validateuser(); 
validatePassword(); 

if(errorUser=false && errorPassword=false){ 
return=true; 
showdiv2(); 

} 
else{ 
    return=false; 
} 

});

検証が正常に動作します。しかし、私は関数showdiv2（）を動作させることはできません。

どうすればこの問題を解決できますか？これはDiv 2のもう1つの類似したフォームなので、div1の送信ボタンは使用できません。

助けてください。

多くのありがとうございます。

出典

2016-07-05 Somename

あなたはshowdiv2（） '' showdiv2は（） 'と呼ばれることはありません理由です'前に 'return'を置きます。 – currarpickt

フィールドが妥当性検査されていなくてもdiv2が表示されます。 – Somename

if文が正しくありません。変数と値を比較するときは、2つの '='記号を1つではなく2つ使用する必要があります。 – Zentryn

それはウルJSページにフォーム情報をリダイレクトするように、あなたはHTMLでウルフォームタグでアクションまたはメソッドを追加する必要があります。.. :)

出典

2016-07-05 05:14:30 Omniverse10

DEMO LINK

function showdiv2() { 
 
    $("#div1").hide(); 
 
    $("#div2").show(); 
 
} 
 

 
function validateuser() { 
 
    var username = $("#username").val().length; 
 
    if (username > 5 && username < 20) 
 
\t \t return true; 
 
} 
 

 
function validatePassword() { 
 
    var password = $("#password").val().length; 
 
    if (password > 8 && password < 20) 
 
    return true; 
 
} 
 
    
 
$('.next').click(function() { 
 
var _return = false; 
 

 

 
    if (!validateuser() && !validatePassword()) { 
 
    showdiv2(); 
 
    _return = true; 
 

 
    } else { 
 
    _return = false; 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <form> 
 
    <label>Username</label> 
 
    <input type="text" id="username"> 
 
    <label>Password</label> 
 
    <input type="text" id="password"> 
 
    </form> 
 
    <a href="#" class="next">NEXT</a> 
 
</div> 
 

 
<div id="div2"> 
 
    <p>Content of Div 2</p> 
 
</div>

を

<input type="text" id="username"><input type="text" id="username"></input>

password length>8 && <20

errorUser==false && errorPassword==false代わりのerrorUser=false && errorPassword=false
使用varの
password.length>8 && password.length<20 yoがinputタグ</input>を閉じるために、すなわち必要はありません、あなたのHTMLに誤りがあり

出典

2016-07-05 05:17:31

ありがとうございますが、コードはフォームを検証しません。フィールドが空であってもdiv 2を表示します。 errorUser == false、errorPassword == falseの場合、div2を表示します。 – Somename

どのように私はあなたが欲しいものを得ました。コードを更新してください、plsそれを確認してください –

jsファイルに新しい変数を定義します。

$(document).ready(function(){ 
    $(".next").click(function(){ 
    var urnm = $("#username").val().length; 
    var pwd = $("#password").val().length; 
    if(urnm >= 5 && urnm<= 20){ 
     if(pwd >= 5 && pwd<= 20){ 
     $("#div2").show(); 
     } 
    } 
    else{ 
     $("#div2").hide(); 
    } 
    }); 
});

出典

2016-07-05 05:28:45 frnt

ありがとうございますが、これはフォームを検証しません。 div1のすべてが有効になっている場合にのみdiv2を表示します。 – Somename

@Somename check update。 – frnt

<html> 
    <head> 
     <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script> 
      function showdiv2() { 
       $("#div1").hide(); 
       $("#div2").show(); 
      } 

      function validateuser() { 

       var username = $("#username").val(); 
       if (username.length < 1) { 
        return true; 
       } 
       if (username.length > 5 && username.length < 20) 
        return false; 

      } 

      function validatePassword() { 
       var password = $("#password").val(); 
       if (password.length < 1) { 
        return true; 
       } 
       if (password.length > 8 && password.length < 20) 
        return false; 

      } 

      $(document).ready(function() { 
       $('.next').click(function() { 

        var errorUser = true; 
        var errorPassword = true; 
        errorUser = validateuser(); 
        errorPassword = validatePassword(); 

        if (errorUser === false && errorPassword === false) { 
         showdiv2(); 
         return true; 
        } else { 
         return false; 
        } 

       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="div1"> 
      <form> 
       <label>Username</label><input type="text" id="username"></input> 
       <label>Password</label><input type="text" id="password"></input> 
      </form> 
      <a href="#" class="next">NEXT</a> 
     </div> 

     <div id="div2"> 
      <p>Content of Div 2</p> 
     </div> 
    </body> 
</html>

このテストコードを試してみてください。任意のヘルプ必要なコメント

出典

2016-07-05 05:56:37

このコードは実行されません。私はそれをそのままコピーしました。 – Somename

場合、私は本当のような変数を定義し、それが動作します：

var errorUser = true; 
var errorPassword = true;

出典

2016-07-05 23:12:18 Somename

jquery関数がフォームの検証に機能しません

答えて

関連する問題