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

Question

在互联网上进行了长时间的研究后，我即将放弃，假设你是我最后的希望。我的问题：我正在为我的公司实施时间表表格。这种形式是动态的，因为您可以在一天内进行多项活动。字段（包含在 PHP 页面中）是：

• 天（文本字段）
• 小时（下拉）
• Notes（员工可以在其中写下当天笔记的文本字段）

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

• 字段 DAY 必须是必需的（这是我在 DB 中的键，我添加了一个 DatePicker 插件）
• 一整天的小时总和不能超过 8 小时

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

• 它无法以某种方式处理进入脚本 php 的数据数组，该脚本将在 DB 上写下（例如，提交的天数将以数组的形式到达后端，我之所以这样决定，是因为天数可以记录在提交之前是未知的）
• 它只在第一行添加控件

我已经尝试（正如我在其他帖子中阅读的那样）在创建新行后添加规则，但是，在这种情况下，只有当我将光标放在其中时，它才适用于其他字段，我离开该字段空白，然后我在该字段之外单击。

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

来自意大利的问候。

<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

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

    $('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 可以）、BUT SAME NAME（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();
    }

替换“标准”表单

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 所建议的那样。现在验证工作完美。我将在验证的第二部分（小时总和）工作，我会告诉你的！非常感谢你的这一刻！