我正在使用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的辅助函数的流程。
我拥有它的方式，无论它返回true还是false，一切仍然执行。
任何人都可以解释我做错了什么吗？
I'm using the jQuery Validator plugin with jQuery 1.6.2.
I'm not validating a <form> but only a lone field by itself. This is because there are several unique <form>'s on this one page and the value from this one field is shared, copied, etc.
The success and invalidHandler handlers are both working correctly based on my rules.
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; }, }); };And I have several other functions unrelated to each other that simply call the myValidate function above...
$('#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. });The above is a very basic representation of what I'm doing and there are no errors.
All this is working except for one thing... my brain. I cannot seem to figure out how to stop/continue the flow of the secondary function(s) that are calling myValidate based on the return true or false within myValidate.
The way I have it, whether it returns true or false, everything still executes.
Can anyone kindly explain what I have done wrong?
最满意答案
我会构建您的代码以遵循现代异步模式。 也许构造你的代码，以便调用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); } }); };When I posted the question, I was not thinking very clearly about the whole thing at all. Besides the wrong approach, there were a couple mistakes preventing it from doing what I wanted.
Side Issue #1 - I was trying to validate this text field "on blur" so I had a whole separate event & function, which led to my unconventional approach and stupid question. All un-needed. All I needed was onkeyup, it validates as you type out the text. No form "submit" required.
onkeyup: function(element) { this.element(element); }Side Issue #2 - I was looking for something that was the opposite of the success: handler, something which fires off whenever validation has failed. However, invalidHandler: only fires when the form is submitted. Even though I ultimately put my field inside a generic form, the form does not need a "submit" in order for validation to take place. I finally realized that the errorPlacement: handler fires off whenever the form fails validation, exactly opposite of the success handler... this is perfect. You don't have to "submit" anything to validate, and the text is validated as you type... it's built into the module.
Side Issue #3 - This issue was only on the SO posting and not my project. Target of validation must be a <form>, not an <input> field. Not only did I neglect to mention that fact, I stated the opposite. It should have been like this, $("#form").validate();
Issue #4 - And obviously, I was incorrectly creating and referencing the myValidate function. I removed all that and just left $('#form').validate(); out by itself. Now that I have a flag being set/unset on valid/invalid Now that I'm using the .valid() method, I can perform my other functions using a simple "if/then".
Solution:
So originally, to solve the problem, I ultimately used a flag variable with some "if/then" statements which is only what I was thinking to avoid when I posted the question... at least that's what I was thinking at the time. Maybe there's a more elegant solution...
EDIT: Yes, there is a more elegant solution...
After looking into Greg's answer, I figure out how to use the .valid() method instead...
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) } });And then several similar functions are attached to various other events. The "if/then" checks for the validation flag the .valid() method before executing anything.
So why am I doing all this?
As stated in my original question, I am sharing the content of this one text field with several other forms on the page. They must be validated too, but this time I'm using the submitHandler: since these other forms actually get "submitted".
This methodology allows me to to sort-of "nest" the validation of the lone field (in #form) within the validation of the other forms being submitted (#formTWO & #formThree)...
$("#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(); } } });更多推荐
发布评论