Question

我正在使用jQuery Validator插件和jQuery 1.6.2。

我没有验证<form>，而是仅验证一个单独的字段。这是因为这一页上有几个唯一的<form>，这个字段的值是共享，复制等的。

success和invalidHandler处理程序都可以根据我的规则正常运行。

var myValidate = function() {
    $("#field").validate({

        // rules, message, etc.

       success: function(error){
          //  doing all kinds of things if this validates
          return true;
       },
       invalidHandler: function(form, validator) {
          //  what to do if this fails validation
          return false;
       },
    });         
};

我还有其他几个与其他函数无关的函数只需调用上面的myValidate函数...

$('#myElement1').click(function() {
    myValidate;  // call to "myValidate" to validate field
    // doing stuff here only if "myValidate" returns true.
});

$('#myElement2').click(function() {
    myValidate;  // call to "myValidate" to validate field
    // only do other things here if "myValidate" returns true.
});

$('#myElement3').click(function() {
    myValidate;  // call to "myValidate" to validate field
    // and different things to do here only if "myValidate" returns true.
});

以上是我正在做的事情的基本表现，并且没有错误。

所有这一切都在起作用，除了一件事......我的大脑。我似乎无法弄清楚如何根据myValidate内的return true或false停止/继续调用myValidate的辅助功能的流程。< / p>

我拥有它的方式，无论它返回true还是false，一切都仍然执行。

有人可以解释我做错了吗？

Answer 1

我会根据现代异步模式构建代码。也许构造你的代码，以便调用myValidate看起来像这样......

$('#myElement1').click(function() {
  myValidate(function(result) {
    if (result === true) {
      //must be valid!
    } else {
      //invalid
    }
  }
});

以下是我将如何构建myValidate函数。

var myValidate = function(callback) {
    $("#field").validate({

        // rules, message, etc.

       success: function(error){
          //  doing all kinds of things if this validates
          return callback(true);
       },
       invalidHandler: function(form, validator) {
          //  what to do if this fails validation
          return callback(false);
       }
    });         
};

Answer 2

尝试重新编写代码。您需要调用$().valid()方法来确定它是否有效，而不是.validate()选项中的处理程序。

另请注意，如果不将输入包装在<form>标记中，我无法将其投入使用。

以下是我重组它的尝试，在this jsFiddle中展示：

$(function() {
    // set up the validation
    $("#field").validate();

    // define your click handlers
    $('#myElement1').click(function() {
        if (myValidate()) {
            alert('Click 1: Validate passed.');
        } else {
            alert('Click 1: Validate failed.');
        }
    });

    $('#myElement2').click(function() {
        if (myValidate()) {
            alert('Click 2: Validate passed.');
        } else {
            alert('Click 2: Validate failed.');
        }
    });

    $('#myElement3').click(function() {
        if (myValidate()) {
            alert('Click 3: Validate passed.');
        } else {
            alert('Click 3: Validate failed.');
        }
    });
});

// put your function down here
function myValidate() {
    var isValid = $('#field').valid();
    if (isValid) {
            //  doing all kinds of things if this validates
            $('#feedback').text('Validation passed.');
    } else {
            //  what to do if this fails validation
            $('#feedback').text('Validation failed.');        
    }
    return isValid;
}

如果您有任何问题，请与我们联系。

Answer 3

当我发布这个问题时，我根本没有想到整个问题。除了错误的方法，还有一些错误阻止它做我想做的事。

问题＃1 - 我试图验证这个文字字段“模糊”，所以我有一个完整的单独事件＆amp;功能，这导致我的非常规方法和愚蠢的问题。一切都是不必要的。我需要的只是onkeyup，它会在您输入文本时进行验证。不需要“提交”表单。

onkeyup: function(element) { this.element(element); }

问题＃2 - 我正在寻找与success:处理程序相反的东西，这种情况会在验证失败时触发。但是，invalidHandler:仅在提交form时触发。即使我最终将我的字段放在一个通用表单中，表单也不需要“提交”以便进行验证。我终于意识到，只要表单验证失败，errorPlacement:处理程序就会触发，与success处理程序完全相反......这是完美的。您不必“提交”任何要验证的内容，并且在您键入时验证文本...它已内置到模块中。

问题＃3 - 此问题仅发布在SO帖子上，而不是我的项目。验证目标必须是<form>，不 <input>字段。我不仅忽略了这个事实，而且我说的恰恰相反。应该是这样的，$("#form").validate();

问题＃4 - 显然，我错误地创建并引用了myValidate函数。我删除了所有内容，然后将$('#form').validate();单独删除了。 ~~现在我在有效/无效~~上设置/取消设置标志现在我正在使用.valid()方法，我可以使用简单的“if / then”执行其他功能。

<强>解决方案：

所以最初，为了解决这个问题，我最终使用了一个标志变量和一些“if / then”语句，这只是我在发布问题时想要避免的...至少那是我在想的时间。也许有一个更优雅的解决方案...

编辑：是的，有更优雅的解决方案......

在查看Greg的回答后，我想出了如何使用.valid()方法......

~~previous jsFiddle using a flag variable~~

new jsFiddle using .valid() method as below

$("#form").validate({
    onkeyup: function(element) { this.element(element); },
    validClass: 'valid',
    rules: {
        comments: {
            required: false,
            maxlength: 180
        }
    },
    success: function(error){
        // stuff to do when it's valid (does not require form submit)
    },
    errorPlacement: function(error, element){
        // stuff to do when it's not valid (does not require form submit)
    }
});

然后几个类似的功能被附加到各种其他事件。在执行任何操作之前，“if / then”检查~~以获取验证标志~~ .valid()方法。

$('#myElement1').click(function() {
    if($("#form").valid()){ // if validated
        // doing stuff here only if it was already validated
    };
});

$('#myElement2').click(function() {
    if($("#form").valid()){ // if validated
        // doing stuff here only if it was already validated
    };
});

那我为什么要做这一切？

正如我原来的问题所述，我正在与页面上的其他几种表格共享这一文本字段的内容。它们也必须经过验证，但这次我使用submitHandler:，因为这些其他表单实际上已“提交”。

这种方法允许我在提交的其他表格（#formTWO＆amp; #formThree）的验证中对单个字段（#form）的验证进行“嵌套”...... / p>

$("#formTWO").validate({
    // rules for #formTWO
    submitHandler: function(form) {
        copyText();  // copy text from #form into #formTWO hidden field before submission
        if($("#form").valid()){ // only allow #formTWO to submit if #form is valid
            form.submit();
        }
    }
});

$("#formThree").validate({
    // rules for #formThree
    submitHandler: function(form) {
        copyText();  // copy text from #form into #formThree hidden field before submission
        if($("#form").valid()){ // only allow #formThree to submit if #form is valid
            form.submit();
        }
    }
});

Answer 4

myValidate;不会致电myValidate。它只是引用它。

您需要if声明。

if (myValidate()) {
    // Valid
}

if (!myValidate()) {
    // Not valid
}

这是基本的JavaScript（基本编程）;如果您对此不熟悉，请尝试了解有关编程和JavaScript的更多信息。

您还可以传递参数以使其适用于多种表单。

试图在返回false时停止函数

4 个答案: