jQuery在jQuery .each()中进行验证 [英] jQuery Validate within jQuery .each()

问题描述

我有很多用于创建的表单

我有这个HTML

<form method="post"  id="form_commento-[i]" class="form_fancybox_commenti">
    <div class="form-section">
        <span style="position: relative">
            <input type="text" id="commento_form_[i]_commento" name="commento_form_[i][commento]" required="required"/>
            <button type="submit" class="submit-button" id="submit_form_commenti">Commenta</button>
        </span>
    </div>
</form>

[i]是索引

准备好我的文档中

$(document).ready(function() {

    jQuery.validator.addMethod("alphanumeric", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9\n\-'àèìòù: <_,. !?()]*$/.test(value);
    },   "error");

    $('.form_fancybox_commenti').each(function(index, numero_form) {

    var theRules = {};

    theRules[
        'commento_form_['+index+'][commento]'] = {alphanumeric: true};


    $(this).validate({
        rules: theRules,
        submitHandler: function(form) {
            save(form);
        }
    });
});

但是我的自定义规则无效.

是否可以解决此问题?

解决方案

如果name是commento_form_[i][commento]，则您在此处缺少一组括号...

'commento_form_'+index+'[commento]'

=>

'commento_form_['+index+'][commento]'

但是，到目前为止，您尚未定义index，因此此方法因JavaScript控制台错误而失败.

---

有一段非常简单的替代JavaScript的代码.将class="alphanumeric"添加到您的<input>元素中，您的代码将简化为以下形式:

$(document).ready(function () {

    jQuery.validator.addMethod("alphanumeric", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9\n\-'àèìòù: <_,. !?()]*$/.test(value);
    }, "error");

    $('.form_fancybox_commenti').each(function (index, numero_form) {
        $(this).validate({
            submitHandler: function (form) {
                save(form);
                // alert('save form: ' + index); // for demo
                return false; // blocks default form action
            }
        });
    });

});

演示: http://jsfiddle.net/XTtTP/

---

如果您希望使用JavaScript分配规则，则还可以使用 .rules('add')方法在jQuery .each()中，如下所示，并且不需要索引:

$('input[name^="commento_form_"]').each(function () {
    $(this).rules('add', {
        alphanumeric: true
    });
});

演示: http://jsfiddle.net/T776Z/

---

顺便说一句， http://jsfiddle.net/h45Da/

I have many form create in for

I have this HTML

<form method="post"  id="form_commento-[i]" class="form_fancybox_commenti">
    <div class="form-section">
        <span style="position: relative">
            <input type="text" id="commento_form_[i]_commento" name="commento_form_[i][commento]" required="required"/>
            <button type="submit" class="submit-button" id="submit_form_commenti">Commenta</button>
        </span>
    </div>
</form>

Where [i] is index

in my document ready I have

$(document).ready(function() {

    jQuery.validator.addMethod("alphanumeric", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9\n\-'àèìòù: <_,. !?()]*$/.test(value);
    },   "error");

    $('.form_fancybox_commenti').each(function(index, numero_form) {

    var theRules = {};

    theRules[
        'commento_form_['+index+'][commento]'] = {alphanumeric: true};


    $(this).validate({
        rules: theRules,
        submitHandler: function(form) {
            save(form);
        }
    });
});

but my custom rules doesn't works.

Anyway to resolve this problem?

解决方案

If the name is commento_form_[i][commento], then you're missing a set of brackets here...

'commento_form_'+index+'[commento]'

=>

'commento_form_['+index+'][commento]'

However, at this point, you have not yet defined index so this method fails with a JavaScript console error.

---

There is a very simple alternative to that chunk of JavaScript. Add class="alphanumeric" to your <input> elements, and your code is reduced simply to this:

$(document).ready(function () {

    jQuery.validator.addMethod("alphanumeric", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9\n\-'àèìòù: <_,. !?()]*$/.test(value);
    }, "error");

    $('.form_fancybox_commenti').each(function (index, numero_form) {
        $(this).validate({
            submitHandler: function (form) {
                save(form);
                // alert('save form: ' + index); // for demo
                return false; // blocks default form action
            }
        });
    });

});

DEMO: http://jsfiddle.net/XTtTP/

---

If you'd rather use JavaScript for assigning your rules, you can also use the .rules('add') method within a jQuery .each(), as follows, and no indexing is required:

$('input[name^="commento_form_"]').each(function () {
    $(this).rules('add', {
        alphanumeric: true
    });
});

DEMO: http://jsfiddle.net/T776Z/

---

BTW, there is already a method called alphanumeric in the additional-methods.js file. See: http://jsfiddle.net/h45Da/

这篇关于jQuery在jQuery .each()中进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！