jquery - 在 SmartWizard 中添加自定义验证

Question

我在 SmartWizard 中有以下代码部分。我想为每个 HTML 控件添加自定义验证。

  <form id="myform">
    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>  

我试过下面的代码但没有用。

function leaveAStepCallback(obj){
               var step_num= obj.attr('rel'); // get the current step number
        return validateSteps(step_num); // return false to stay on step and true to continue navigation 
      }

Answer 1

我知道这已经过时了，但无论如何我都会回答，因为我在自己做之前发现了这篇文章

//..init wizard
onLeaveStep: function(obj, context){ 
    //Validate the current step                                  
    var frst = "#step-"+context.fromStep;
    var container = this.elmStepContainer.find(frst);
    //container now contains everything in the box
    //you can now container.find("...") to get fields
    //and then run some regex or whatever you want to do the validation
    if(invalid_fields.length > 0){
        return false ;
    }else{ return true;}},
//...the rest of the wizard init

Answer 2

这将有助于其他寻找相同问题的人，此实现来自插件的版本 4。为该事件方法返回 false 将停止步骤的传播，因此保持在同一步骤上并出现错误。

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber) {
    var formElms = $(anchorObject.attr('href')).find("input, textarea");
    var hasError = false;
    $.each(formElms, function(i, elm){
        if(elm.val().length == 0){
           hasError = true;
        }
    });
    return !hasError;
});