验证表格总数

时间:2015-08-02 00:53:49

标签: javascript jquery html

目前我有一个字段集中每个表单的计数器(i,j,k)。有没有办法创建一个函数,以便当我单击提交按钮时,它将检查字段的总数(i + j + k)是否正确,以便提交。例如,在这种形式中,我希望3个字段集中至少有9个表单。该按钮仅在满足该条件时提交。我只能使用HTML Css和JavaScript。

//First
$(function() {
  var addDiv = $('#addinput');
  var i = $('#addinput p').size() + 1;

  $('#addNew').live('click', function() {
    $('<label>Choose a picture<a href="#" id="remNew">X</a><br><input type="file" ' + i + '" value="" required="required" /><img class="target" src="#" alt="Choose and Upload" /> </label><br>').appendTo(addDiv);
    i++;
    $('fieldset input').change(function() {
      if (this.files && this.files[0]) {
        var $target = $(this).next('.target');
        var reader = new FileReader();
        reader.onload = function(e) {
          $target.attr('src', e.target.result).width(150).height(112);
        };
        reader.readAsDataURL(this.files[0]);
      }
    });
    return false;
  });

  $('#remNew').live('click', function() {
    if (i > 2) {
      $(this).parents('label').remove();
      i--;
    }
    return false;
  });
});

//Second
$(function() {
  var addDiv = $('#addinput2');
  var j = $('#addinput2 p').size() + 1;

  $('#addNew2').live('click', function() {
    if (j > 5) {
      alert("Reached maximum number of fields.");
      return false;
    }

    $('<label>Choose a picture<a href="#" id="remNew2">X</a><br><input type="file" ' + j + '" value="" required="required"/><img class="target" src="#" alt="Choose and Upload" /></label><br>').appendTo(addDiv);
    j++;
    $('fieldset input').change(function() {
      if (this.files && this.files[0]) {
        var $target = $(this).next('.target');
        var reader = new FileReader();
        reader.onload = function(e) {
          $target.attr('src', e.target.result).width(150).height(112);
        };
        reader.readAsDataURL(this.files[0]);
      }
    });
    return false;
  });

  $('#remNew2').live('click', function() {
    if (j > 2) {
      $(this).parents('label').remove();
      i--;
    }
    return false;
  });
});


//Third
$(function() {
  var addDiv = $('#addinput3');
  var k = $('#addinput3 p').size() + 1;

  $('#addNew3').live('click', function() {
    if (k >= 6) {
      alert("Reached maximum number of fields.");
      return false;
    }
    $('<label>Choose a picture<a href="#" id="remNew3">X</a><br><input type="file" ' + k + '" value="" required="required"/><img class="target" src="#" alt="Choose and Upload" /></label><br>').appendTo(addDiv);
    k++;
    $('fieldset input').change(function() {
      if (this.files && this.files[0]) {
        var $target = $(this).next('.target');
        var reader = new FileReader();
        reader.onload = function(e) {
          $target.attr('src', e.target.result).width(150).height(112);
        };
        reader.readAsDataURL(this.files[0]);
      }
    });
    return false;
  });

  $('#remNew3').live('click', function() {
    if (k > 2) {
      $(this).parents('label').remove();
      i--;
    }
    return false;
  });
});

//Preload 
$('fieldset input').change(function() {
  if (this.files && this.files[0]) {
    var $target = $(this).next('.target');
    var reader = new FileReader();
    reader.onload = function(e) {
      $target.attr('src', e.target.result).width(150).height(112);
    };
    reader.readAsDataURL(this.files[0]);
  }
});
.locationsector legend {
  font-size: 2em;
}
.locationsector {
  border-radius: 5px;
  border: 5px solid black;
  width: 30%;
  margin-left: 0.7%;
  float: left;
  padding: 10px;
}
img {
  text-align: center;
  margin: 2%;
  display: inline-block;
  border: 10px solid black;
  padding: 5px;
  width: 150px;
  height: 112px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form>
  <fieldset class="locationsector" id="addinput">
    <legend>1</legend>
    <p>
      <label>Choose a Picture
        <input type="file" required="required" />

        <img class="target" src="#" alt="Choose and Upload" />

      </label>
      <br>
      <a href="#" id="addNew">Add</a>
    </p>
  </fieldset>
  <fieldset class="locationsector" id="addinput2">
    <legend>2</legend>
    <p>
      <label>Choose a Picture
        <input type="file" required="required" />

        <img class="target" src="#" alt="Choose and Upload" />

      </label>
      <br>
      <a href="#" id="addNew2">Add</a>
    </p>
  </fieldset>
  <fieldset class="locationsector" id="addinput3">
    <legend>3</legend>
    <p>
      <label>Choose a Picture
        <input type="file" required="required" />

        <img class="target" src="#" alt="Choose and Upload" />

      </label>
      <br>
      <a href="#" id="addNew3">Add</a>
    </p>
  </fieldset>
  <input type="submit" class="sendform" onclick="check()"></input>
  <input type="reset"></input>
</form>

1 个答案:

答案 0 :(得分:0)

只需添加这些代码即可进行验证

function check(){
    if (document.querySelectorAll('label > input').length < 9) {
        alert('Invalid Number of Pictures');
    }
}