循环中的Bootstrap表单JS验证

时间:2017-11-24 12:15:19

标签: javascript html twitter-bootstrap

在循环中获得表单验证的正确方法是什么? ($ i设置在其他地方)

  <form class="form-calculator" id="edit'.$i.'" action="includes/processing/manual_edit_processing.php" method="post">
  <div class="modal-body">

            <div class="form-group has-feedback" id="div_edit_naam['.$i.']">
              <input type="text" class="form-control" id="edit_naam['.$i.']" name="edit_naam['.$i.']" placeholder="Naam" value="'.$row_list['naam'].'" onkeyup="validate_edit(this, '.$i.'))" onmousemove="validate_edit(this, '.$i.')"><span class="glyphicon glyphicon-warning-sign form-control-feedback" id="edit_naam_status['.$i.']">
            </div>
        </div>

     </div>

    </div>
  </div>
  </form>

  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="window.location.reload()">Sluiten</button>
    <button type="button" id="submit_edit'.$i.'" alt="'.$i.'" class="btn btn-primary edit">Bewerk</button>
  </div>

上面是我的HTML部分,在我的JS部分之下,我想我已经搞砸了ID的独特之处?

<script type="text/javascript">
window.onload=function() { document.getElementById('submit_edit[]')[nr].disabled = true; }

function validate_edit(selectVeld, nr)
{
    // edit_naam
    if(document.getElementById('edit_naam[]')[nr].value.length < 5) { document.getElementById('div_edit_naam[]')[nr].className = "form-group has-warning has-feedback"; document.getElementById('edit_naam_status[]')[nr].className = "glyphicon glyphicon-warning-sign form-control-feedback"; }
    else
    { document.getElementById('div_edit_naam[]')[nr].className = "form-group has-success has-feedback"; document.getElementById('edit_naam_status[]')[nr].className = "glyphicon glyphicon-ok form-control-feedback"; }

    // Submit form
    if(document.getElementsByClassName('has-error').length > 0 || document.getElementsByClassName('has-warning').length > 0) { document.getElementById('submit_edit').disabled = true; }
    else { document.getElementById('submit_edit').disabled = false; }
}
</script>

1 个答案:

答案 0 :(得分:1)

您应该使用:

document.getElementById("edit_naam["+nr+"]")

而不是:

document.getElementById('edit_naam[]')[nr]

您为HTML元素设置的大多数ID都具有此格式something[index],因此您应该将该参数作为参数传递给document.getElementById函数。 document.getElementById('edit_naam[]')[nr]没有任何意义,因为此函数只返回一个HTML元素。

此外,HTML 4中的ID不接受[]