jQuery對復合html控件進行不引人注意的驗證

[英]jQuery unobstrusive validation on composite html control


I have the following control that represents Time :

我有以下代表時間的控件:

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

Because I want to add validation, I added:

因為我想添加驗證,我補充說:

<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>

And I added the adapter and method:

我添加了適配器和方法:

$.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;
});

But the method "time_method" is never executed, I guess because jquery.validate only applies on input tags, am I right?

但是方法“time_method”永遠不會執行,我猜因為jquery.validate只適用於輸入標簽,我是對的嗎?

What would be the best way to do it?

最好的方法是什么?

Thanks.

謝謝。

UPDATE: I know it could be done in several ways, I'm just interested in the possibility of do it this way. I have simplify the problem to show a very small and silly example of what I'm trying to achieve.

更新:我知道它可以通過多種方式完成,我只是對這種方式的可能性感興趣。我已經簡化了問題,以展示我正在努力實現的一個非常小而愚蠢的例子。

5 个解决方案

#1


2  

demo: http://so.devilmaycode.it/jquery-unobstrusive-validation-on-composite-html-control

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


your code should look something like this:

你的代碼應該是這樣的:

$(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',
        }
    });
});

your html something like:

你的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>

#2


0  

Since the validation of hours and minutes are independent, you could just add separate validators to the two input fields.

由於小時和分鍾的驗證是獨立的,您可以在兩個輸入字段中添加單獨的驗證器。

#3


0  

Why not use something like this: http://jsfiddle.net/3KCd4/2/

為什么不使用這樣的東西:http://jsfiddle.net/3KCd4/2/

#4


0  

I would keep it simple. The separate messages for minutes and hours or separate inputs and additional adapters seem overcomplicated to me. All you need is just the good regex for time input. Regex validator adapter is already included in plugin.

我會保持簡單。分鍾和小時的單獨消息或單獨的輸入和其他適配器似乎過於復雜。你需要的只是時間輸入的好正則表達式。正則表達式驗證程序適配器已包含在插件中。

<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="" />

Idea of applying regex to it is mine. Regex pattern was taken from here.

將正則表達式應用於它的想法是我的。正則表達式模式取自這里。

That validation plugin (and most of validation plugins probably) depend on input element specific properties, that are value in first place, and then the supported events that validation can be triggered with. div supports nor the value, neither onchange or other events.

該驗證插件(可能是大多數驗證插件)依賴於輸入元素特定屬性,它們首先是值,然后是可以觸發驗證的受支持事件。 div既不支持也不支持值,也不支持onchange或其他事件。

If the object to be validated is so complex, I would suggest to write that validation on server or just in form submit event, without those dynamic validations and error message show -ups.

如果要驗證的對象如此復雜,我建議在服務器上或僅在表單提交事件中編寫該驗證,而不使用那些動態驗證和錯誤消息show -ups。

#5


0  

Since keypress and change events bubble, you can use

由於按鍵和更改事件會冒泡,您可以使用

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

Replace keypress with change if you want the validation to occur when the input element(s) lose focus.

如果要在輸入元素失去焦點時進行驗證,請將更改按鍵替換為更改。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2011/07/22/7298f742ca343296602cb35b7964ed6a.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com