複数のステップフォームとメッセージ表示の検証方法

Question

複数のステップフォームとメッセージ表示の検証方法：メールを入力してください。すべてのエラーメッセージは にしてください同時に表示する：次のボタンをクリックすると、私はすべてを表示すると仮定します。複数のステップフォームとメッセージの表示方法を検証する方法。複数のステップフォームとメッセージ表示を有効にする方法。

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

ますvalidateメソッドを含むJquery.validate.min.jsファイルを使用できます。

function valid(){ 
$("#rform").validate({ 

     rules:{ 
      uname:"required", // uname, email are input names 
      umail:{ 
       required:true,  
       email:true 

      }, 
      upass:{ 
      required:true, 
      minlength:8 
      } 

     }, 
     messages:{ 
      uname:"Please enter full name", 
      umail:{ 
       required:"Please enter email id", 
       email:"Please enter valid email id" 

      }, 
      upass: 
      { 
       required:"please provide password", 
       minlength:"min length of password is 8" 
      } 

     }, 
     submitHandler :function(form){ 
      // alert("it works!"); 
      console.log("it works!"); 
      // form.submit(); 
       funreg(); //function to be called after submit button is pressed and al inputl fields are valids 

     } 

     }); 
}