jqueryで複数のステップフォームにエラーメッセージを表示したい

Question

jqueryで複数のステップフォームにエラーメッセージを表示したい場合 次のボタンをクリックして値を入力せずにエラーメッセージを表示するとすぐにエラーメッセージを表示します。あなたはこれらのためにjQuery Stepsプラグインを使用することができるとすぐに値エラーメッセージが

function isEmail(str) { // simple email validation 
 
    return /(.+)@(.+){2,}\.(.+){2,}/.test($.trim(str)); 
 
} 
 
function isEmpty(str) { // test for empty string 
 
    return $.trim(str) === ""; 
 
} 
 
function validate($div) { // validates any div - will not let you leave the div if error 
 
    var $fields = $div.find("input"), hasError = false; 
 
    $fields.each(function() { 
 
    $(this).removeClass("error") 
 
    hasError = this.name=="pword" && isEmpty(this.value); 
 
    if (hasError) { 
 
     $("#pword").addClass("error").focus(); 
 
     return false; 
 
    } 
 
    hasError = this.name=="email" && (isEmpty(this.value) || !isEmail(this.value)); 
 
    if (hasError) { 
 
     $("#email").addClass("error").focus(); 
 
     return false; 
 
    } 
 
    hasError = isEmpty(this.value); // the rest of the fields 
 
    if (hasError) { 
 
     $(this).addClass("error").focus(); 
 
     return false; 
 
    } 
 
    }) 
 
    return hasError?false:true; 
 
} 
 
$(function() { 
 

 
    // validate all divs on submit, but actually only necessary to validate thediv the submit is on 
 
    $("#myForm").on("submit",function(e) { 
 
    $(".page").each(function() { 
 
     if (!validate($(this))) { 
 
     e.preventDefault(); // stop submission 
 
     return false; 
 
     } 
 
    }); 
 
    }); 
 

 
    $(".nav").on("click", function() { 
 
    var $parent = $(this).closest("div"); 
 
    var $nextDiv = $(this).hasClass("next") ? $parent.next() : $parent.prev(); 
 
    if (validate($parent)) { // is the div this button is on valid? 
 
     $parent.fadeOut(function() { // fade it out and fade the next one in 
 
     if ($nextDiv.length) { 
 
      $nextDiv.fadeIn() 
 
      for (var i=$(".page").length;i> $nextDiv.index(); i--) { 
 
      $("#bar" + i).css({"background-color": "#D8D8D8"}); // we are going backwards   
 
      } 
 
      $("#bar" + $nextDiv.index()).css({"background-color": "#38610B"}); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
});

body { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    text-align: center; 
 
    background-color: #D8D8D8; 
 
} 
 

 
#wrapper { 
 
    width: 995px; 
 
    padding: 0px; 
 
    margin: 0px auto; 
 
    font-family: helvetica; 
 
    position: relative; 
 
} 
 

 
#wrapper .baricon { 
 
    display: inline-block; 
 
    border-radius: 100%; 
 
    padding: 12px; 
 
    background-color: #38610B; 
 
    color: white; 
 
} 
 

 
#wrapper .progress_bar { 
 
    width: 200px; 
 
    height: 5px; 
 
    border-radius: 20px; 
 
    background-color: #D8D8D8; 
 
    display: inline-block; 
 
} 
 

 
#wrapper form div { 
 
    margin-left: 340px; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    width: 300px; 
 
    margin-top: 50px; 
 
    background-color: #585858; 
 
} 
 

 
#wrapper form div p { 
 
    color: #F2F2F2; 
 
    margin: 0px; 
 
    margin-top: 10px; 
 
    font-weight: bold; 
 
} 
 

 
#wrapper form div .form_head { 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
    margin-bottom: 30px; 
 
} 
 

 
#wrapper form div input[type="text"] { 
 
    width: 200px; 
 
    height: 40px; 
 
    padding: 5px; 
 
    border-radius: 5px; 
 
    border: none; 
 
    margin-top: 10px; 
 
} 
 

 
#wrapper form div input[type="button"], 
 
input[type="submit"] { 
 
    width: 80px; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
    border: 2px solid white; 
 
    background: none; 
 
    color: white; 
 
    margin: 5px; 
 
    margin-top: 10px; 
 
} 
 

 
#user_details, 
 
#qualification { 
 
    display: none; 
 
} 
 

 
.error { background-color:pink !important}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <br> 
 
    <span class='baricon'>1</span> 
 
    <span id="bar1" class='progress_bar'> </span> 
 
    <span class='baricon'>2</span> 
 
    <span id="bar2" class='progress_bar'> </span> 
 
    <span class='baricon'>3</span> 
 

 
    <form method="post" action="" id="myForm"> 
 
    <div id="account_details" class="page"> 
 
     <p class='form_head'>Account Details</p> 
 
     <p>Email Address</p> 
 
     <input type="text" name="email" id="email" placeholder='Email Address'> 
 
     <p>Password</p> 
 
     <input type="text" name="pword" id="pword" placeholder='Password'> 
 
     <br> 
 
     <input type="button" value="Next" class="nav next" /> 
 
    </div> 
 

 
    <div id="user_details" class="page"> 
 
     <p class='form_head'>User Details</p> 
 
     <p>First Name</p> 
 
     <input type="text" name="fname" id="fname" placeholder='First Name'> 
 
     <p>Last Name</p> 
 
     <input type="text" name="lname" is="lname" placeholder='Last Name'> 
 
     <p>Gender</p> 
 
     <input type="text" name="gender" id="gender" placeholder='Gender'> 
 
     <br> 
 
     <input type="button" value="Prev" class="nav prev" /> 
 
     <input type="button" value="Next" class="nav next" /> 
 
    </div> 
 

 
    <div id="qualification" class="page"> 
 
     <p class='form_head'>Qualification</p> 
 
     <p>Qualification</p> 
 
     <input type="text" placeholder='Qualification'> 
 
     <p>Hobbies</p> 
 
     <input type="text" placeholder='Hobbies'> 
 
     <br> 
 
     <input type="button" value="Prev" class="nav prev" /> 
 
     <input type="Submit" value="Submit"> 
 
    </div> 
 
    </form> 
 

 
</div>

Answer 1

消え入ると、私はそれが必要任意の値を埋めるアウトと次のbtttonをクリックして値のエラーメッセージdisappear.if与えますエラーメッセージを入力してください複数のステップ形式。これは非常に扱いやすいでしょう。