從jQuery發送click（）時發生webforms驗證時出錯

Question

我開發了一個Chrome擴展，它將一個數字輸入到輸入字段中，然後單擊一個按鈕。它工作正常，直到目標網站開始使用WebForms驗證（我認爲）。輸入值，然後手動單擊確定按鈕可以正常工作，我如何以編程方式模擬此行爲？

我的方法：從Javascript控制檯

$('#valueField').val(value); 
$('#okButton').click(); 

例外：

Error in event handler for 'undefined': Object [object global] has no method '_ValidationSummaryOnSubmit' TypeError: Object [object global] has no method '_ValidationSummaryOnSubmit' 
    at window.ValidationSummaryOnSubmit (https://secure3.skandiabanken.se/UI/Script/Core/Jquery/Validation/Validation.js?2.1.0.4:1:570) 
    at Page_ClientValidate (https://secure3.skandiabanken.se/WebResource.axd?d=TQl_45lQl5IYnwb5P1nM-SzV…V9fbLp8rNqbZHpUJEW8_Ic7iJXC7haRyFmGtkyzRSo0fTQ1&t=634967428818384649:122:5) 
    at WebForm_DoPostBackWithOptions (https://secure3.skandiabanken.se/WebResource.axd?d=UGn3VmeniFVT9-soGkd6Rewz…6R0Sc-xgyUag1XOlfrpjMSnBeHuqg8IzaJ1Ze5c1YwlIgE1&t=634967428818384649:14:32) 
    at HTMLInputElement.onclick (https://secure3.skandiabanken.se/UI/Pages/Payment/Payments.aspx:422:831) 
    at Object.f.event.trigger (chrome-extension://aicobpcnbdifilefkjabflphkdmjlohb/jquery-1.7.2.min.js:3:3465) 
    at HTMLInputElement.<anonymous> (chrome-extension://aicobpcnbdifilefkjabflphkdmjlohb/jquery-1.7.2.min.js:3:11098) 
    at Function.e.extend.each (chrome-extension://aicobpcnbdifilefkjabflphkdmjlohb/jquery-1.7.2.min.js:2:11776) 
    at e.fn.e.each (chrome-extension://aicobpcnbdifilefkjabflphkdmjlohb/jquery-1.7.2.min.js:2:8304) 
    at f.fn.extend.trigger (chrome-extension://aicobpcnbdifilefkjabflphkdmjlohb/jquery-1.7.2.min.js:3:11074) 
    at f.fn.(anonymous function) [as click] (chrome-extension://aicobpcnbdifilefkjabflphkdmjlohb/jquery-1.7.2.min.js:3:11871) event_bindings:346 

---

編輯：向目標網站添加一些代碼（不是真的知道，雖然包括什麼）

這是OK按鈕：

<input coreValidationGroup="vgMain" coreCausesValidation="True" type="image" 
name="okButton" id="okButton" class="coreMwa ShowProgressBar" src="ok.png" alt="OK" 
onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;okButton&quot;, &quot;&quot;, true, &quot;vgMain&quot;, &quot;&quot;, false, false))" /> 

這是腳本Validation.js：

$(document).ready(function() { 
    var a = { 
     inputDefaultCssClass: "inputDefault", 
     inputErrorCssClass: "inputError", 
     checkBoxErrorCssClass: "checkBoxError", 
     labelErrorCssClass: "labelError" 
    }; 
    if (window.ValidatedTextBoxOnKeyPress && !window._ValidatedTextBoxOnKeyPress) { 
     window._ValidatedTextBoxOnKeyPress = window.ValidatedTextBoxOnKeyPress; 
     window.ValidatedTextBoxOnKeyPress = function() { 
      return true 
     } 
    } 
    if (window.ValidationSummaryOnSubmit && !window._ValidationSummaryOnSubmit) { 
     window._ValidationSummaryOnSubmit = window.ValidationSummaryOnSubmit; 
     window.ValidationSummaryOnSubmit = function (h) { 
      window._ValidationSummaryOnSubmit(h); 
      if (typeof Page_ValidationSummaries == "undefined") return; 
      for (var f = 0; f < Page_ValidationSummaries.length; f++) { 
       var c = Page_ValidationSummaries[f], 
        e = $(c).parent().parent().parent().parent().parent(); 
       if (e) { 
        var j = e.is(".validationSummaryContainer"); 
        if (!Page_IsValid && IsValidationGroupMatch(c, h)) { 
         if (!j) 
          if ($(c).hasClass("showDividerLine")) $(c).wrap("<div class='validationSummaryContainer dividerline'><div class=validationSummary><div class=l1><div class=l2><div class=l3></div></div></div></div></div>"); 
          else $(c).wrap("<div class='validationSummaryContainer'><div class=validationSummary><div class=l1><div class=l2><div class=l3></div></div></div></div></div>") 
        } else j && e.replaceWith($(c)) 
       } 
      } 
      var g; 
      if (Page_Validators) 
       for (i = 0; i < Page_Validators.length; i++) { 
        g = Page_Validators[i]; 
        var b = $("#" + g.controltovalidate); 
        if (b) { 
         var d = $("label[for='" + b.attr("id") + "']"), 
          k = b.prop("Validators"); 
         if (AllValidatorsValid && AllValidatorsValid(k)) { 
          if (!b.is("input:checkbox")) 
           if (b.hasClass(a.inputErrorCssClass)) { 
            b.removeClass(a.inputErrorCssClass); 
            b.addClass(a.inputDefaultCssClass) 
           } 
          if (d) d.hasClass(a.labelErrorCssClass) && d.removeClass(a.labelErrorCssClass) 
         } else { 
          if (!b.is("input:checkbox")) 
           if (!b.hasClass(a.inputErrorCssClass)) { 
            b.removeClass(a.inputDefaultCssClass); 
            b.addClass(a.inputErrorCssClass) 
           } 
          if (d)!d.hasClass(a.labelErrorCssClass) && d.addClass(a.labelErrorCssClass) 
         } 
        } 
       } 
     } 
    } 
}) 

Answer 1

您可以調度與JavaScript事件。 如果驗證檢查此情況下，本應該做的伎倆：

//從MDN直兩者只是修改到您的ID

function simulateClick() { 
    var evt = document.createEvent("MouseEvents"); 
    evt.initMouseEvent("click", true, true, window, 
    0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    var cb = document.getElementById("okButton"); 
    var canceled = !cb.dispatchEvent(evt); 
    if(canceled) { 
    // A handler called preventDefault 
    alert("canceled"); 
    } else { 
    // None of the handlers called preventDefault 
    alert("not canceled"); 
    } 
}