Question

所以我有3个字段集，第一个有信息请求电话号码和电子邮件。如果我将这些类型作为电子邮件和手机进行检查，但是例如，如果它捕获了一个虚假的类型，它只会说明它并仍然执行动画。

如果发现验证失败，如何让动画停止？

  this is basically what I have
  http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

<script>    
$(document).ready(function(){
    var clkvalue = []


    $('#General-submit').click(function(){
        var foo0 = $('.array0').val();
        var foo1 = $('.array1').val();
        var foo2 = $('.array2').val();
        var foo3 = $('.array3').val();
        var foo4 = $('.array4').val();
        var foo5 = $('.array5').val();
        var foo6 = $('.array6').val();
        var foo7 = $('.array7').val();
    clkvalue.push(foo0);
    clkvalue.push(foo1); 
    clkvalue.push(foo2); 
    clkvalue.push(foo3); 
    clkvalue.push(foo4); 
    clkvalue.push(foo5); 
    clkvalue.push(foo6);
    clkvalue.push(foo7); 
    });

    $('#other-submit').click(function(){
        var baz = $('.select-array').val();
     clkvalue.push(baz); 
         var bar = $('#username').val();
     clkvalue.push(bar); 
    });

    $('#done').click(function(){
        $('#demo').append("<div>" + clkvalue[0] + "<br>" + clkvalue[1] + "<br>" + clkvalue[2] + "<br>" + clkvalue[3] + "<br>" + clkvalue[4] +"<br>" + clkvalue[5] +"<br>" + clkvalue[6] +"<br>" + clkvalue[7] +"<br>" + clkvalue[8] + "<br>" + clkvalue[9] + "</div>");
    });
});


        $(document).ready(function(){
            //JQUERY
            //jQuery time
            var current_fs, next_fs, previous_fs; //fieldsets
            var left, opacity, scale; //fieldset properties which we will animate
            var animating; //flag to prevent quick multi-click glitches

            $(".next").click(function(){
               if(animating) return false;
               animating = true;

               current_fs = $(this).parent();
               next_fs = $(this).parent().next();

           //activate next step on progressbar using the index of next_fs
           $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

           //show the next fieldset
               next_fs.show(); 
           //hide the current fieldset with style
               current_fs.animate({opacity: 0}, {
               step: function(now, mx) {
           //as the opacity of current_fs reduces to 0 - stored in "now"
           //1. scale current_fs down to 80%
               scale = 1 - (1 - now) * 0.2;
           //2. bring next_fs from the right(50%)
               left = (now * 50)+"%";
           //3. increase opacity of next_fs to 1 as it moves in
               opacity = 1 - now;
               current_fs.css({'transform': 'scale('+scale+')'});
               next_fs.css({'left': left, 'opacity': opacity});
              }, 
                  duration: 800, 
                complete: function(){
                current_fs.hide();
                 animating = false;
                  }, 
              //this comes from the custom easing plugin
              easing: 'easeInOutBack'
               });
            });


            $(".submit").click(function(){
               return false;
                }) 
  });
 </script>



 <div> 

 <!-- multistep form -->
 <form id="msform" >
     <!-- progressbar -->
   <ul id="progressbar" style="width: 900px; margin-left: 18%;">
       <li class="active">General</li>
       <li>Type</li>
      <li>Finish</li>
     </ul>
   <!-- fieldsets -->
   <fieldset style="overflow: auto">
    <h2 class="fs-title">Add New User</h2>


     <input  type="text"   name="First"    class="array0"     placeholder="First Name" />
     <input  type="text"   name="Middle"   class="array1"     placeholder="Middle Initial" />
     <input  type="text"   name="Last"     class="array2"     placeholder="Last Name" />
     <input  type="text"   name="Title"    class="array3"     placeholder="Title" />
     <input  type="email"   name="Email"    class="array4"     placeholder="Email" />
     <input  type="text"   name="Office"   class="array5"     placeholder="Office Phone" />
     <input  type="text"   name="Mobile"   class="array6"     placeholder="Mobile Phone" />
     <input  type="text"   name="Fax"      class="array7"     placeholder="Fax" />
       <br>
     <input  type="button" name="Cancel"   class="previous action-button" value="Cancel" />
          <input  type="submit" name="Next"     class="next action-button"     value="Next"   id="General-submit"/>

   </fieldset>
   <fieldset>
     <h2 class="fs-title">Add New User</h2>

     </br>
     <input id="username" type="text" name="username" placeholder="Username"/>
     <br>
     <p style="float:left">COS</p> <Select class="select-array">
     <option value="Administrator">Administrator</option>
     <option value="User">User</option>
     <option value="Read Only">Read Only</option>
      </Select>
     <input type="button" name="previous" class="previous action-button" value="Cancel" />
       <button id="other-submit" type="button" name="next" class="next action-button" value="Next"     style="float:right" > Next </button>

    </fieldset>

    <fieldset >
    <h2 class="fs-title">Complete</h2>
    <h3 class="fs-subtitle">User Added Successfully!</h3>
        <div id="demo"></div>
    <input type="button" name="previous" class="previous action-button" value="Add Another" />
    <button type="submit" id="done" name="submit" class="submit action-button" value="Submit">     Submit </button>
</fieldset>


 </form>




    <script src="js/classie.js"></script>
    <script src="js/gnmenu.js"></script>
    <script>
        new gnMenu( document.getElementById( 'gn-menu' ) );
    </script>
</div>

Answer 1

假设您指的是HTML5验证，我建议您阅读

HTML5 Forms: JavaScript and the Constraint Validation API

您正在寻找的是checkValidity()方法，也在那里进行了描述。

使用动画Jquery验证电子邮件

1 个答案: