2017-02-24 101 views
1

我已經成功爲我的網站在HTML,CSS和JS(具有依賴關係:jQuery和Validation)中創建了一個工作的jQuery.validation表單。問題是當我在乾淨的ASP.NET Core web項目中使用完全相同的代碼時,它似乎沒有在JavaScript中使用我的自定義驗證參數jQuery.validate不適用於ASP.NET Core

驗證在所有情況下均適用。然而,我對.validate([options])定製[options]似乎並沒有對ASP.NET核心工作的工作代碼

例子:JSFiddle

HTML:

<form method="post"> 
<fieldset> 
    <div class="master"> 
     <input name="name" id="name" placeholder="Name" minlength="2" maxlength="40" required /> 
    </div> 
    <div class="master"> 
     <input name="email" id="email" placeholder="Email Address" type="email" required /> 
    </div> 
    <div class="master"> 
     <input name="company" placeholder="Company Name" /> 
    </div> 
    <div class="master"> 
     <input name="website" placeholder="Website" type="url" required /> 
    </div> 

    <button type="submit">Next</button> 
</fieldset> 
</form> 

CSS:

.master { 
    padding: 10px; 
    background-color: white; 
} 

.has-error { 
    background-color: red; 
} 

.has-success { 
    background-color: green; 
} 

JS:

$('form').validate({ 
    // This disables the default validation notifications to the user. 
    // Instead I'll be using CSS colors to notify users of valid or invalid fields 
    errorPlacement: function (error, element) { }, 

    // Invalid field produces a red-background in parent element 
    highlight: function(element) { 
    $(element).parent().addClass('has-error').removeClass('has-success'); 
    }, 

    // Valid field produces a green-background in parent element 
    unhighlight: function(element) { 
    $(element).parent().removeClass('has-error').addClass('has-success'); 
    } 
}); 

我的JavaScript .validate([options])做3兩件事:

  1. 刪除jQuery.validation默認的通知選項
  2. 如果<field>無效,父元素的背景色是紅色
  3. 如果<field>VALID,父元素的背景色是綠色

注:

  • 更新我的ASP.NET核心(1.1),以最新的穩定版本
    • 降級到ASP.NET Core 1.0來測試
  • 增加通過涼亭最新的jQuery,地方和CDN(用於測試)
  • 增加通過涼亭,地方和CDN(用於測試)
    • 根據驗證網站的jQuery的某些版本已被用於最新的驗證兼容性。我通過涼亭,本地和CDN測試的所有版本
  • 做了一個原始的HTML,CSS和JS版本的一切剝離出來(依賴包括)中的jsfiddle,CodePen和地方。 一切都很完美但不是在ASP項目。
  • 外部或內聯JavaScript,無變化。

我的結論: 驗證工作在所有情況下,這意味着這兩個ASP.NET核心應用程序和普通HTML - CSS - JS有正常功能驗證。

不能正常工作是當我在我的$('form').validate([options]);中提供[options]在ASP.NET核心應用程序中。我不確定爲什麼我的選項沒有被使用。在.validate([options])

+0

令人懷疑,這與ASP.Net(核心或其他)本身 - 除了引用腳本/ css(路徑等)有關。當天結束的客戶端是客戶端,服務器是服務器(後者是所有ASP.Net玩法的味道)。 – EdSF

回答

0

官方jQuery.validate頁我想通了這個問題。它與jQuery.validate做([option])對象屬性:highlightunhighlight

例如::

$('form').validate({ 
    errorPlacement: function (error, element) { }, 

    highlight: function (element) { 
     // Do stuff 
    }, 

    unhighlight: function (element) { 
     // Do stuff 
    } 

    success: function (element) { 
     // Do stuff 
    } 
}); 

success的屬性完全使用success

它直接與其它兩個屬性相沖突通過工具提示通知用戶無效字段的不同方式。 highlightunhighlight爲開發人員提供了更多的自定義方式,以便擁有更多的控制權。

在ASP.NET核心,因爲jQuery.validate自帶隨每個核心ASP.NET Web應用程序,它適用於自己的success財產除了其腳手架的地方建設中。

我解決這個問題的方法是最後明確地調用我的JS腳本並將回調函數放在success函數中的任何函數中。

相關問題