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

您可以使用包含Jquery.validate.min.js方法的validate文件请参阅以下代码：

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

        }

      });
}

如何验证每个字段的多步表单和消息显示

1 个答案: