如何添加一個「重置」按鈕到JQuery步驟

Question

我還沒有看到這個問題 - 雖然我確實閱讀了大概100個關於類似主題的jQuery步驟，但似乎沒有解決我的問題。

我正在使用jQuery步驟，並希望在第一步完成後添加一個「重置」按鈕 - 以防我的用戶想要清除表單並重新開始。我希望這個按鈕在默認的「下一步」按鈕後被激活。

這是我基於默認的基本形式here

$(function() 
{ 

    function errorPlacement(error, element) 
    { 
     element.before(error); 

    } 
    $("#form").validate({ 
     rules: { 
      zip: { 
       required: true, 
       maxlength:5, 
       minlength:5 
       }, 
      phone: { 
       required: true, 
       minlength: 10, 
       phoneUS: true 
      } 

     } 
    }); 


    $("#wizard").steps({ 
     headerTag: "h3", 
     bodyTag: "section", 
     transitionEffect: "slideLeft", 
     onStepChanging: function (event, currentIndex, newIndex) 
     { 
      // Allways allow step back to the previous step even if the current step is not valid! 
      if (currentIndex > newIndex) 
      { 
       return false; 
      } 


      $("#form").validate().settings.ignore = ":disabled,:hidden"; 
      return $("#form").valid(); 

     }, 
     onFinishing: function (event, currentIndex) 
     { 
      $("#form").validate().settings.ignore = ":disabled"; 
      return $("#form").valid(); 
     }, 
     onFinished: function (event, currentIndex) 
     { 
      alert("Thank you! Your request has been sumbitted."); 
     } 
    }); 
}); 

Answer 1

您可以啓用和使用cancel按鈕調validator.resetForm()當前的腳本。請參閱以下示例：

$(function() 
{ 
    var validator; 

    $("#wizard").steps({ 
     enableCancelButton: true, 
     onCanceled: function (event) 
     { 
      validator.resetForm(); 
     } 
    }); 

    validator = $("#form").validate({ 
     rules: { 
      zip: { 
       required: true, 
       maxlength:5, 
       minlength:5 
      }, 
      phone: { 
       required: true, 
       minlength: 10, 
       phoneUS: true 
      } 
     } 
    }); 
}); 

Answer 2

$form.find("[aria-label=Pagination]").append('<li class="" aria-disabled="true"><a class="imp-sub" href="#">Save &amp; Exit</a></li>');