0

我有一个包含五个表格行的表格。所以我想验证一个用户是否完全填满了任何一行。

这是我的代码片段

<div class="full_width_structure">
    <table>
        <tr>
            <td>
                <label>Name :</label>
            </td>
            <td>
                <label>Designation :</label>
            </td>
            <td>
                <label>Type :</label>
            </td>
            <td>
                <label>Contact No</label>
            </td>
            <td>
                <label>Address</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="name1" class="required[0]" rel="Name" />
            </td>
            <td>
                <input type="text" name="designation1" class="required[1]" />
            </td>
            <td>
                <select name="type1">
                    <option>Rural</option>
                    <option>Urban</option>
                </select>
            </td>
            <td>
                <input type="text" name="contactnum1" class="required[2] contactno" />
            </td>
            <td>
                <textarea name='address1' class="required[3] textarea autoHeightTextarea"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="name2" class="" />
            </td>
            <td>
                <input type="text" name="designation2" />
            </td>
            <td>
                <select name="type2">
                    <option>Rural</option>
                    <option>Urban</option>
                </select>
            </td>
            <td>
                <input type="text" name="contactnum2" class="validate[required] text-input"
                />
            </td>
            <td>
                <textarea name='address2' class="validate[required] textarea autoHeightTextarea"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="name3" class="validate[required] text-input"
                />
            </td>
            <td>
                <input type="text" name="designation3" />
            </td>
            <td>
                <select name="type3">
                    <option>Rural</option>
                    <option>Urban</option>
                </select>
            </td>
            <td>
                <input type="text" name="contactnum3" class="validate[required] text-input"
                />
            </td>
            <td>
                <textarea name='address3' class="validate[required] textarea autoHeightTextarea"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="name4" class="validate[required] text-input"
                />
            </td>
            <td>
                <input type="text" name="designation4" />
            </td>
            <td>
                <select name="type4">
                    <option>Rural</option>
                    <option>Urban</option>
                </select>
            </td>
            <td>
                <input type="text" name="contactnum4" class="validate[required] text-input"
                />
            </td>
            <td>
                <textarea name='address4' class="validate[required] textarea autoHeightTextarea"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="name5" class="validate[required] text-input"
                />
            </td>
            <td>
                <input type="text" name="designation5" />
            </td>
            <td>
                <select name="type5">
                    <option>Rural</option>
                    <option>Urban</option>
                </select>
            </td>
            <td>
                <input type="text" name="contactnum5" class="validate[required] text-input"
                />
            </td>
            <td>
                <textarea name='address5' class="validate[required] textarea autoHeightTextarea"></textarea>
            </td>
        </tr>
    </table>
</div>
<!-- full_width_structure -->

所以这里的一行将有姓名、名称、类型、联系电话地址。一个用户最多可以填写五个条目。因为只存在五个静态行。所以我想编写 jquery 验证代码来检查一个用户是否完全填充了一行。

如果他完全输入了一行，则提交，否则返回 false。

我当前的验证码

// not working as expected 

$('#policestationForm input,#policestationForm .autoHeightTextarea').each(function () {
    var thisObj = $(this);
    $(this).focus(function () {
        if (noEmptyExists(thisObj)) {
            if ($(this).val() === 'This Field Required') {
                $(this).val('').removeClass('error_notification');
            }
        } else {
            console.log('no');
        }
    });

    /*
     * Blur 
     */
    $(this).blur(function () {
        if (!noEmptyExists(thisObj)) {
            $(this).addClass('error_notification').val('This Field Required');
            runHideEffect(thisObj);
        } else {

        }
    });
});

/*
 * Submitt form validation 
 */
$('#policestationBtn').submit(function () {
    $('#policestationForm input,#policestationForm      .autoHeightTextarea').each(function () {

    });
});

});

function noEmptyExists(thisObjParam) {
    return $(thisObjParam).filter(function () {
        return !$.trim(this.value);
    }).length === 0;
}

function runHideEffect(thisHideObj) {
    setTimeout(function () {
        thisHideObj.val('').removeClass('error_notification');
    }, 10000);
}
4

1 回答 1

1

你应该group validation像这样使用，

HTML

<input class="names" name="name1">
<input class="names" name="name2">

脚本

通过验证插件

$(function(){
    var vfinc=$("form").validate({
        rules: {
            Name1: {
                require_from_group: [1, ".names"]
            },
            Name2: {
                require_from_group: [1, ".names"]
            }
        },
        groups: {
            group: "Name1 Name2"
        },
    });
});

在 Jquery 中很简单

这只是为了names您可以添加更多字段

$(function(){
    $('form').on('submit',function(){
        var empty_name=0;
        for(var i=0,len=$('.names').length;i<len;i++)
        {
            nm=$('.names')[i];
            if(nm.value!='')
            {
                empty_name++;
            }
        }
        if(empty_name==0)
        {
            alert('Enter name');
            return false;
        }
        return true;
    });
});
于 2013-08-28T04:52:14.013 回答