Question

我这里有一个jsfiddle - http://jsfiddle.net/Lxvzuznt/13/

这是一个简单的单一表单，带有jquery验证。

-

我需要在页面上有多个表单。

表单是动态创建的，所以我希望输入字段的id是相同的。

不同的表单会将用户注册到不同的事件，以便他们捕获相同的信息，但用于不同的用途。

有没有办法使用一个验证功能，并说验证与'this'按钮相关的输入

    $(function(){
        $('.btn').click(function(e){
            e.preventDefault();
            if(valFields()){

            }
        })
    })

    function valFields(){

        var flag = true;

        var name = $(this).parent().$('#name');
        var number = $(this).parent().$('#number');

        if(name.val().length == 0){
            alert('No Name');
        }

        if(number.val().length == 0){
            alert('No Number');
        }

        return flag;
    }

Answer 1

如上所述@zaynetro，您不能在同一页面中使用相同的ID。因此，您可以使用class元素的name或input属性。

更好地传递this方法中的valFields，然后通过其class名称访问元素

var name = $(ele).parent().find('.form-control');
var number = $(ele).parent().find('.form-control');

$(function() {
  $('.btn').click(function(e) {
    e.preventDefault();
    // pass this
    if (valFields(this)) {

    }
  })
})

// Access the this here
function valFields(ele) {
  var flag = true;

  var name = $(ele).parent().find('.form-control');
  var number = $(ele).parent().find('.form-control');

  if (name.val().length == 0) {
    alert('No Name');
  }

  if (number.val().length == 0) {
    alert('No Number');
  }

  return flag;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form role="form">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" class="form-control" />
  </div>
  <div class="form-group">
    <label for="name">Number</label>
    <input type="text" id="number" class="form-control" />
  </div>
  <button class="btn">Send</button>
</form>
<form role="form">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" class="form-control" />
  </div>
  <div class="form-group">
    <label for="name">Number</label>
    <input type="text" id="number" class="form-control" />
  </div>
  <button class="btn">Send</button>
</form>

使用一个函数验证单独的表单 - 此输入

1 个答案: