Question

经过长期的互联网研究，我即将放弃，让我们说你是我最后的希望。我的问题：我正在为我的公司实施时间表表格。这种形式是动态的，因为在一天中你可以做几个活动。字段（包含在PHP页面中）是：

日（文字字段）
小时（下拉）
备注（员工可以为当天撰写备注的文本字段）

列出的所有字段都包含在字段集中。在字段集的顶部我放了一个按钮，单击它我将添加另一行，其中包含之前列出的数据。现在，在提交到后端之前，我当然想要一些验证规则如下：

必须要求Field DAY（这是我在DB中的键，我添加了一个DatePicker插件）
一整天的小时数不能超过8小时

我尝试过使用Jquery Validate但似乎有两个问题：

它无法以某种方式处理将写入DB的脚本php的数据数组（例如提交的日期将到达阵列的后端，我已经决定了这种方式因为天数在提交之前不知道可记录的内容）
仅在第一行添加控件

我已尝试（正如我在其他帖子中所读到的）在创建新行后添加规则，但是，在这种情况下，只有当我将光标置于其中时才会在其他字段上工作，我离开了字段空白，然后我点击该字段外。

我附上我的代码，任何帮助都将不胜感激!!

来自意大利的问候。

<script type="text/javascript">
$(document).ready(function() {

    var i = 0;

    //fadeout selected item and remove
    $('.remove').live('click', function() {
        $(this).parent().fadeOut(300, function(){ 
        $(this).empty();
        return false;
        });
    });


    $('a#add').click(function() {
        i++;
        var options = '<p>Day    <input type="text" id = "Day'+i+'" class = "Day" name="day[]">  </select>  hours<select id = "hours'+i+'" class = "hours" name="hours[]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option></select>   Notes    <input type="text" id="Note'+i+'" class = "Note" name="note[]"><a href="#" class="remove"><img src="images\\remove.png" height="20" width="20"></img></a></p>';
        $(options).fadeIn("slow").appendTo('#extender');


    });

    $('.Day').live('click', function() {
    $(this).datepicker('destroy').datepicker({
        changeMonth: false,
        changeYear:  false,
        stepMonths:  false,
        dateFormat: "dd-mm-yy",
        showOn:'focus'}).focus();
    });

});
</script>

这是附加动态字段的地方

<form name="rec_abs" method="post" action = "rec_on_db.php">

<fieldset>
<legend>Timesheet</legend>
<div id="extender"></div>
<p><a href="#" id="add"><img src="images\add.png" alt="" border=3 height=20 width=20></img></a>    </p>
</fieldset>

</form>
<input type="submit" value="Send your timesheet"></input><br>

Answer 1

关于您的元素仅在更改时验证的事实，您可以尝试使用插件的onsubmit选项：

$("form[name='rec_abs']").validate({
     onsubmit:true
});

在验证多个字段时，我建议您使用addClassRule方法为验证添加类规则。

通过以下方式定义规则：

$.validator.addClassRules("my-day", {
  required: true
});

然后将my-day课程添加到您的日元素中。

关于小时数的总和，请查看addMethod方法。它使您可以定义自定义验证规则。以下是检查电话号码是否为+XXXXXX格式的示例（X是一个数字，+是可选的）：

$.validator.addMethod("phone", function(value, element) {
    // no phone number is a good phone number (the field is optional)
        if (value.length == 0) { return true; }
   // use a regexp to test the if the value is in the '+XXXXXX..' form
        return /^\+?(\d){5}\d+/i.test(value);
    }, 'Invalid phone number');

我之前设法让我的验证工作在ajax加载的内容上，同时使用类规则和自定义方法将我的脚本保留在单独的文件中。

Answer 2

感谢Celsius先生的回复。现在通过第一次修改，您建议我可以在提交时验证我的表单。顺便说一句，还有更多。我修改了生成动态表单的代码，如下所示：

    $('a#add').click(function() {
        i++;
        var options = ' .... html of the row as before ...';

    $(options).fadeIn("slow").appendTo('#extender');


    $('#Day'+i).rules('add', {
        required: true,
        messages: {
        required: ""
        }  
    });

    $('#Hours'+i).rules('add', {
        required: true,
        messages: {
        required: ""
        }  
    });


    });

通过这些行，我在新创建的文档部分添加规则。我只是为了让每个单元格都有自己的ID而放置一个计数器，类名保持不变。为了我的目的，我必须将数据放在数组中，每种类型的数据都有自己的向量。这是问题所在。如果所有字段都有不同的ID（HTML正常），相同的CLASS（HTML正常），但是相同的名称（对于HTML而不是Jquery验证），验证仅在第一行进行！为了实现这个目标，我对query.validate.js做了一个修改，放了这段代码：

    checkForm: function() {
    this.prepareForm();
    for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
        if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
        for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
            this.check( this.findByName( elements[i].name )[cnt] );
        }
        } else {
        this.check( elements[i] );
        }
    }
    return this.valid();
    }

取代＆＃34;标准＆＃34;形式

checkForm: function() {
this.prepareForm();
for ( var i = 0, elements = ( this.currentElements = this.elements() ); elements[ i ]; i++ )     {      
this.check( elements[ i ] );
 }
return this.valid();
}

如链接Jquery Validation validate form-array所示。现在验证工作完美。我将在验证的第二部分（小时数）工作，我会告诉你！非常感谢你们！

使用jQuery Validate插件进行表单验证

2 个答案: