試圖在返回false時停止函數

Question

我在jQuery 1.6.2中使用了jQuery Validator插件。

我沒有驗證<form>，但它本身只有一個孤立的字段。這是因爲有這一個頁面，從該一個字段是共享的，複製的價值等

的success和invalidHandler處理程序都正常工作基於我的規則在幾個獨特<form>的。

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，一切仍然執行。

任何人都可以好心解釋我做錯了什麼嗎？

Answer 1

當我發佈這個問題時，我根本沒有想清楚整個事情。除了錯誤的方法，還有一些錯誤阻止它做我想做的事。

枝節問題＃1 - 我試圖「上模糊」驗證這一文本字段，所以我有一個完整而獨立的事件&功能，這導致我的非常規的方法和愚蠢的問題。所有不需要的。我需要的只是onkeyup，它會在您輸入文本時進行驗證。無需「提交」表單。

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

枝節問題＃2 - 我一直在尋找的東西，是success:處理相反，只要東西驗證失敗時觸發關閉。但是，invalidHandler:僅在提交form時觸發。即使我最終將我的字段放在一個通用表單中，爲了進行驗證，表單也不需要「提交」。我終於意識到，errorPlacement:處理程序在表單驗證失敗時觸發，與success處理程序完全相反......這是完美的。您不必「提交」任何要驗證的內容，並且在鍵入內容時驗證文本......它已內置到模塊中。

Side Issue＃3 - 此問題僅限於SO發佈，而不是我的項目。驗證目標必須是<form>,而不是和<input>字段。我不僅沒有提及這個事實，反而說出了相反的意思。它應該是這樣的，$("#form").validate();

問題＃4 - 很顯然，我被錯誤地創建和引用myValidate功能。我刪除了所有這些，只是自己離開了$('#form').validate();。 現在我有一個標誌正在設置/取消設置有效/無效現在我正在使用.valid()方法，我可以使用一個簡單的「if/then」來執行我的其他功能。

解決方案：

所以最初，要解決這個問題，我最終使用的標誌變量與一些「的if/then」語句裏面只有我在想什麼，以避免當我張貼的問題..至少這就是我當時的想法。也許有一個更好的解決方案...

編輯：是的，還有一個更優雅的解決方案......

尋找到格雷格的回答後，我弄清楚如何使用.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 & #formThree）確認內排序的「鳥巢」單個場的驗證（在#form）...

$("#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 2

myValidate;不叫myValidate。它只是參考它。

你想要一個if陳述。

if (myValidate()) { 
    // Valid 
} 

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

這是基本的JavaScript（基本編程）;如果您不熟悉這一點，請嘗試詳細瞭解編程和JavaScript。

您也可以傳遞參數使其能夠使用多種形式。

Answer 3

我會構建您的代碼以遵循現代異步模式。也許你的結構代碼，以便於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 4

嘗試重構您的代碼。您需要調用$().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; 
} 

讓我知道如果您有任何問題。