jQuery addClass作为表单验证的基础

时间:2014-12-17 23:13:03

标签: jquery forms validation

我正在开发一个包含大量字段和动态属性的表单。验证必填字段的基础是根据输入分配了一个类=" req"。

<input type="text" name="fieldname" class="req">

当字段更改时运行验证功能:

$('.req').change (validate);

验证适用于所有具有类硬编码的输入。然而,基于无线电的选择,需要一组约12个场。为此,我使用addClass(&#39; req&#39;)。对于这些动态添加的字段类,不运行验证。

$("input:radio[name=second_owner]").click (function () {
 $('#owner2').hide();
 if ($(this).attr('id') == 'second_owner') {
  $('#owner2').show();
  $('input').each (function () {
   if ($(this).attr('name').indexOf('owner_2') >= 0) {
    $(this).addClass('req');
//  alert ($(this).attr('class'));
   }
  });
 }
});

警报(启用时)显示已分配类,但更改字段时验证不会运行。我假设必须以某种方式重新加载必填字段数组才能使其正常工作。

知道我做错了什么?

2 个答案:

答案 0 :(得分:1)

汤姆,

我与Christian完全同意这一点,但我有一些想法可以帮助你构建你的形式。

您是否可以使用其他元素的禁用状态,而不是使用类'reg'?您已经提到需要12个字段,具体取决于复选框或单选按钮的状态。您可以执行以下操作:

$('#my_checkbox').change(
    function(event) {
        if ($('#my_checkbox').prop('selected')) {
            // enable 12 fields here
        } else {
            // disable 12 fields here
        }
    }
);

您可以在选择器中执行更复杂的操作,而不仅仅是$('input'),例如:

$(':input:not(:disabled))')...

您可能还需要考虑某种类型的表单管理器来帮助您,特别是如果您有大量输入。想到这一点:http://borgboyone.github.io/jquery-form-manager/。那里还有其他人。

A

答案 1 :(得分:0)

$('.req').change(validate)仅将change事件绑定到执行时.req的元素。这意味着,如果您在调用.req之后将$('.req').change(validate)类添加到元素中,则change事件将不会绑定到这些元素。

您有2个选项。您可以在添加.req类后将更改事件绑定到元素,例如:

$(this).addClass('req').change(validate);

或者您可以使用事件委派。使用jQuery.on(),您可以将事件绑定到父元素并传入可选的子选择器:

$('body').on('change', '.req', validate);

body替换为更合适的父级。