jQuery的複合HTML控件unobstrusive驗證

我有以下的控制表示時間：jQuery的複合HTML控件unobstrusive驗證

<div id="xxx"> 
    <input type="text" name="xxx.hour"/> 
    <input type="text" name="xxx.minute"/> 
</div>

因爲我要添加驗證，我說：

<div id="xxx" data-val="true" data-val-time="Time no valid"> 
    <input type="text" name="xxx.hour"/> 
    <input type="text" name="xxx.minute"/> 
</div>

而且我加入了適配器和方法：

$.validator.addMethod("time_method", function (val, el, params) { 

    var elementId = $(el).attr('id'); 
    alert('id ' + elementId); 
    var hour= $(el).children('input[name$=.hour]').val(); 
    var minute= $(el).children('input[name$=.minute]').val(); 

    return hour>= 0 && hour<24 && minute>=0 && minute<23; 
}); 

$.validator.unobtrusive.adapters.add("time", {}, 
function (options) { 
    options.rules["time_method"] = true; 
    options.messages["time_method"] = options.message; 
});

但方法「time_method」永遠不會執行，我猜是因爲jquery.validat e僅適用於輸入標籤，對嗎？

什麼是最好的方法來做到這一點？

謝謝。

更新：我知道這可以通過幾種方式完成，我只是有興趣這樣做的可能性。我簡化了這個問題，展示了我想要實現的一個非常小而愚蠢的例子。

來源

2011-07-22 vtortola

由於小時和分鐘的驗證是獨立的，因此您可以將單獨的驗證器添加到兩個輸入字段中。

來源

2011-08-02 12:03:31 sje397

確實，問題在於MVC3在頂層容器上應用了屬性，DIV也獲得了「data- *」屬性。 – vtortola

啊，@vtortola，你在這個問題中沒有提到MVC3。 – sje397

對，因爲問題是關於如何在DIV上執行驗證，所以它與MVC3無關：D – vtortola

爲什麼不使用這樣的事情：http://jsfiddle.net/3KCd4/2/

來源

2011-08-02 12:29:20

，因爲這個東西的目的是爲這個特定情況編寫自定義管道代碼 – vtortola

我會保持它的簡單。分鐘和小時的單獨消息或單獨的輸入和附加適配器似乎對我來說過於複雜。所有你需要的只是時間輸入的好的正則表達式。正則表達式驗證器適配器已包含在插件中。

<input data-val="true" data-val-regex="Time is not valid" data-val-regex-pattern="^([0-1][0-9]|[2][0-3]):([0-5][0-9])$" 
     type="text" id="time" name="time" value="" />

應用正則表達式的想法是我的。正則表達式來自here。

驗證插件（以及大多數驗證插件可能）依賴於input元素特定的屬性，首先是value，然後支持可以觸發驗證的事件。 div支持也不value，既不onchange或其他事件。

如果要驗證的對象如此複雜，我會建議在服務器上編寫驗證或僅在表單提交事件中進行驗證，而不使用這些動態驗證和錯誤消息顯示。

來源

2011-08-02 13:00:39 archil

問題在於MVC3適用頂部容器上的屬性，在這種情況下是DIV。通常，這是通過輸入完成的，所以它沒有問題，但我試圖想出一個自定義控件，然後驗證不能在DIV上工作：（ – vtortola

忘記分鐘和小時，那只是一個例如，我想知道的是，如何在DIV上執行驗證：P – vtortola

就我而言，驗證無法在div上完成。爲什麼要在html元素上進行輸入驗證，這與html無關值？:)。還有更多，請在服務器端進行。對客戶端 – archil

演示：http://so.devilmaycode.it/jquery-unobstrusive-validation-on-composite-html-control

你的代碼應該是這個樣子：

$(function() { 
    $.validator.addMethod('time_method',function(val, el) { 
     var re,max; 
     if (el.id == 'xxx_hour') { 
      re = /^\d{1,2}$/; 
      max = 24; 
     } 
     if (el.id == 'xxx_minute') { 
      re = /^\d{2}$/; 
      max = 59; 
     } 
     return re.test(val) && val >= 0 && val <= max; 
    }, 
    'Time no valid'); 

    $("#xxx").validate({ 
     rules: { 
      xxx_hour: 'time_method', 
      xxx_minute: 'time_method', 
     } 
    }); 
});

你的HTML類似：

<form id="xxx"> 
<input type="text" name="xxx_hour" id="xxx_hour" maxlength="2"/> 
<input type="text" name="xxx_minute" id="xxx_minute" maxlength="2"/> 
</form>

來源

2011-08-07 15:47:49

我無法更改HTML代碼。它是一個組件自動 - 由框架生成 – vtortola

@vtortola：您的原始代碼的主要問題是輸入名稱應該具有適用的名稱xxx.hour不是有效格式，您可以避免maxlength，但是您應該更改id和name，是否可以CH在頁面加載時通過javascript來使用它嗎？ –

由於按鍵並改變事件的泡沫，你可以使用

//in $.ready 
$('div#xxx').keypress(function(){ 
    //Do validation 
}

如果您希望驗證在輸入元素失去焦點時發生，請更換按鍵。

來源

2011-08-27 07:50:46 Wheatley

jQuery的複合HTML控件unobstrusive驗證

回答

相關問題