在for循环中生成html

时间:2018-03-09 11:55:50

标签: javascript jquery html css

我正在使用此jquery验证:http://www.runningcoder.org/jqueryvalidation/

它完美无缺,但如果我使用javascript动态生成代码,如果其中一个输入未通过数据验证,则错误消息将出现在所有输入中。

有没有办法解决这个问题?

for (var i = 0; i < result.length; i++) {
  inputs += '<div class="input-group bottom15"><span class="input-group-addon">' + (i + 1) + '</span>' +
    '<input type="text" class="form-control" placeholder="Insert the description for ' + result[i] + '"  name="paramDescriptions" id="paramName' + (i + 1) + '"' +
    'data-validation-message="The description must be between 2 and 25 characters. No special characters allowed."\n' +
    'data-validation="[L>=2, L<=25, MIXED]" required></div>';
}

上面的代码生成......

<div id="inputDiv" class="col-sm-10">
  <div class="input-group bottom15"><span class="input-group-addon">1</span><input type="text" class="form-control" placeholder="Insert the description for FREQUENCY" name="paramDescriptions" id="paramName1" data-validation-message="The description must be between 2 and 25 characters. No special characters allowed."
      data-validation="[L>=2, L<=25, MIXED]" required=""></div>
  <div class="input-group bottom15"><span class="input-group-addon">2</span><input type="hidden" class="form-control" name="paramName" value="DAYS"><input type="text" class="form-control" placeholder="Insert the description for DAYS" name="paramDescriptions" id="paramName2" data-validation-message="The description must be between 2 and 25 characters. No special characters allowed."
      data-validation="[L>=2, L<=25, MIXED]" required=""></div>
</div>

1 个答案:

答案 0 :(得分:0)

https://facebook.github.io/react-native/docs/platform-specific-code.html使用此部分代码查找元素:

node.find('input:not([type="submit"]), select, textarea')

因此将检查示例中的每个input字段。但是,错误是为字段的名称属性注册的:

var inputName = $(input).attr('name')

// ...

registerError(inputName, error[0].replace('$', inputShortName).replace('%', error[1]));

这就是您看到两个字段的错误消息的原因。

将字段的名称值简单更改为唯一值可以解决此问题。