0

我正在处理一些使用.js文件来处理客户端 javascript 的遗留代码。在表单上，​​用户可以通过单击加号和减号按钮即时创建字段：

在此处输入图像描述

我正在使用 jquery 执行此操作：

$(document).ready(function() 
{  
    var html = "<div class='registration_box01' id='showme'> <div class='title'> <h4>Additional Guest<br /></h4> </div> <div class='content'> <div class='clr'></div> <div class='label01'>*First name:</div> <div class='field01'> <input name='add_fname[]' type='text' size='40' style='min-width:250px;' /> </div> <div class='clr'></div> <div class='label01'>*Last name:</div> <div class='field01'> <input name='add_lname[]' type='text' size='40' style='min-width:250px;' /> </div> <div class='clr'></div> <div class='label01'>*Email:</div> <div class='field01'> <input name='add_email[]' type='text' size='40' style='min-width:250px;'> </div> </div> </div>";
    $(function() {
      $("#inc").click(function() { 
        var num = $(":text[name='qty']").val(function(i, v) { 
                       return Number(v) + 1;
                  }).val();
        $(this).addClass ('c' + num);
        var incrementVar = num;
        $('.additional').append(html);
      }); 

      $("#dec").click(function() {              
        $(":text[name='qty']").val(function(i, v) { 
        $("#showme").remove();
            if(Number(v) > 1){                                              
                return Number(v) - 1; 
            }
            else{    
                return 1;
            }
        });
      });  
    });
});

我的问题是如何验证 Javascript 中的动态字段？我想我不会反对在 jQuery 中添加一个函数来检查它们。我当前验证表单的功能：

巴斯宾

HTML：

<form action="register.php" method="post" onsubmit="return validateFrm(this);">
4

1 回答 1

0

我觉得一个简单的方法是给每个输入一个特定的类。例如，“名字”文本框应该具有“fname-textbox”类。在您的验证功能中，您知道所有“名字”文本框都不应该为空，并且可能至少应该有 2 个字符长（或其他字符）。所以你可以做这样的事情：

function validateFrm(form) {
    var isValid = true;
    var $form = $(form);
    $form.find(".fname-textbox").each(function () {
        var $this = $(this);
        var $this_val = $this.val();
        if (isNaN($this_val) && $this_val.length > 1) {
            $(this).removeClass("input-validation-error");  // won't fail if it doesn't have the class already
            // Remove any other indications of error for this field (like a "*" next to it)
        } else {
            isValid = false;
            $(this).addClass("input-validation-error");  // maybe input-validation-error has a red border and red text color?
            // Maybe add another indication of error for this field (like a "*" next to it)
        }
    });
    // And continue the validation for your other fields
    return isValid;
}
于 2012-08-30T13:24:51.370 回答