【问题标题】:How can I detect when jQuery Validation is done, and call something based on that event?如何检测 jQuery 验证何时完成,并根据该事件调用某些内容?
【发布时间】:2011-09-19 07:44:36
【问题描述】:

我是 jQuery 新手。

同时使用 jQuery 验证插件和 cufon 让我很难受。

基本上,一旦 jQuery Validation 完成了它必须做的事情并在它之后立即调用 Cufon.refresh(),我想检测事件。

$('#commentForm').validate({
    rules: {
        password: {
            required: true,
            minlength: 8,
            maxlength: 8,
            number: true
        },
    }
});

当表单无效时,我们期待<label class="error"> SOME TEXT </label>

一旦创建,我想在 jQuery Validation 创建的标签上使用 Cufon.refresh()。 如何检测 jQuery 验证何时完成,并根据该事件调用某些内容?

非常感谢任何帮助。 问候, 彼得

【问题讨论】:

    标签: javascript jquery jquery-validate cufon


    【解决方案1】:

    感谢@Ariel - 如果有“成功”,也必须有“不成功”,所以..

    工作代码:

    $('#commentForm').validate({
        rules: {
            password: {
                required: true,
                minlength: 8,
                maxlength: 8,
                number: true
            }
        },
        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            Cufon.refresh();
            //alert('not valid!')
        },
        success: function() {
            //alert('valid!')
        }
    });
    

    再次感谢您的想法!

    【讨论】:

    • 如果不想刷新整个字体,我发现运行Cufon.replace('label.error', {fontFamily:"myAwesomeFont"})跑得更快。如果您知道正在显示什么,您可以只针对该选择器而不刷新整个页面。
    【解决方案2】:

    使用success 选项:

    $('#commentForm').validate({
        rules: {
            password: {
                required: true,
                minlength: 8,
                maxlength: 8,
                number: true
            },
        }
        success: function() { .... }
    });
    

    请注意,密码对象的大括号后有一个额外的逗号。这会在 IE 中报错。

    【讨论】:

    • 我正在寻找无效事件!不过感谢您的想法!
    • 感谢@Ariel - 如果有“成功”,也必须有“不成功”,所以.. 工作代码:$('#commentForm').validate({ rules: { password: { required: true, minlength: 8, maxlength: 8, number: true } }, showErrors: function(errorMap, errorList) { this.defaultShowErrors(); Cufon.refresh(); //alert('not valid!') }, success: function() { //alert('valid!') } }); 再次感谢您的想法!跨度>
    【解决方案3】:
     <script src="js/validate/jquery-1.11.1.min.js"></script>
     <script src="js/validate/jquery.validate.min.js"></script>
     <script src="js/validate/additional-methods.min.js"></script>
    
    <script>
        jQuery.validator.setDefaults({
            success:  "valid"
        });
    
        var form = $("#myform");
        form.validate({
            rules: {
               name: {required: true, minlength: 2},
                lastname: {required: true, minlength: 2}
            }
    
        });
    
        $("#button").click(function() {
            if(form.valid() == true ) { // here you check if validation returned true or false 
                $("body").addClass("loading");
            }
        })
    
    </script>
    

    【讨论】:

    • 您应该在代码中添加一些上下文。告诉 OP 为什么这可以解决他/她的问题。
    【解决方案4】:
    submitHandler: { function(){ bla bla }}
    

    这将允许您在验证完成后执行代码。不过,您需要放置一个提交表单 sn-p,因为它会替换默认处理程序。

    编辑:

        // specifying a submitHandler prevents the default submit 
        submitHandler: function() { 
            alert("submitted!"); 
        }, 
        // set this class to error-labels to indicate valid fields 
        success: function(label) { 
            // set   as text for IE 
            label.html(" ").addClass("checked"); 
        } 
    

    您可以使用其中任何一个来做您想做的事。 submitHandler 允许您停止提交并改为执行代码(您可以在提交之前使用它来执行代码)或在提交之后成功执行代码。

    【讨论】:

    • 错误的验证插件 :) 似乎有很多,他没有说是哪一个。我假设那些有rules 选项的人。
    • 不过,您需要放置一个提交表单 sn-p,因为它会替换默认处理程序。 如果可以的话,请提供更多详细信息 - 我是新手。跨度>
    • @Ariel - 这是我正在使用的 plg http://bassistance.de/jquery-plugins/jquery-plugin-validation/
    【解决方案5】:

    把它放在errorPlacement 选项里面。

    errorPlacement: function(error, element) {
      error.appendTo( element.parent() );
      yourCodeHere();
    }
    

    【讨论】:

      【解决方案6】:
      $(document).ready(function() {  
          $('#commentForm').submit(function(){
              var validationResponse = $('#commentForm').valid();
      
              if(validationResponse) {
                  // when true, your logic
              } else {
                  // when false, your logic
                  return false;
              }
          });
      
          $("#commentForm" ).validate({
              rules: {
                  "first_name": {
                      required: true
                  }
              },
              messages: {
                  "first_name": {
                      required: "First Name can not be empty"
                  }
              }
          });
      });
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2011-12-30
        • 1970-01-01
        • 1970-01-01
        • 2023-03-03
        • 1970-01-01
        • 2014-11-15
        • 1970-01-01
        相关资源
        最近更新 更多