Question

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

enter image description here

我是用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中添加一个函数来检查它们。我当前验证表单的函数：

Pastebin

HTML：

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

Answer 1

我觉得这样做的一个简单方法就是给每个输入一个特定的类。例如，“名字”文本框应该具有“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;
}

在Javascript中对动态创建的表单字段执行验证

1 个答案: