How Can I Add/Remove a row with validation

Question

How can I add/remove a row with validation? Here is my working example. I want to set only validation .

http://jsfiddle.net/Bhuro/o6g60b57/1/

<div id="mainDiv">
    <div class="one">
        <div class="row">
            <div class="input-field col s1">
                <input type="text" class="sno" name="sno[]" value="1"  readonly>
                <label for="Sr" >Sr</label>
            </div>
            <div class="input-field col s2">
                <input id="item_code" type="text" name="item_code[]" onKeyUp="showHint(this.value)">
                <label for="item_code" >Item Code</label>
            </div>
            <div class="input-field col s2">
                <input id="item_name" type="text" name="item_name[]" value=" ">
                <label for="item_name" >Item Name</label>
            </div>
            <div class="input-field col s1 add">
                <a href="#">Add</a>
            </div>
            <div class="input-field col s1 delete">
                <a href="#"> Remove</a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="input-field col s2">
        <button class="btn cyan waves-effect waves-light right" type="submit" name="submit" onClick="return purchasebill_validation_print();"/>
            Save
            <i class="mdi-content-send right"></i>
        </button>
    </div>
</div>

$(document).ready(function () {
    $(".add").click(function () {
        var length = $('.one').length;
        var cloned = $(this).closest('.one').clone(true);        
        cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
        cloned.find(':input:not(".sno")').val(" ");

        cloned.find("input[onKeyUp*='showHint']").attr('onKeyUp', 'showHint' + (length + 1) + '(this.value)');
        cloned.find("input[onkeydown*='showHintqty']").attr('onkeydown', 'showHintqty' + (length + 1) + '(this.value)');
        cloned.find("input[id*='item_name']").attr('id', 'item_name' + (length + 1));
        cloned.find("input[id*='quantity']").attr('id', 'quantity' + (length + 1));
        cloned.find("input[id*='item_code']").attr('id', 'item_code' + (length + 1));

        var parent = $(this).closest('.one');
        calculate(parent);
    });

    $('.delete').click(function () {
        if ($('.one').length == 1) {
            alert("This is default row and can't deleted");
            return false;
        }
        var parent = $(this).closest('.one');
        $(this).parents(".one").remove();
        calculate(parent);
        // reset serial numbers again
        $('.one').each(function(index, item) {
            $(this).find('.sno').val(index + 1);
            $(this).find("input[onKeyUp*='showHint']").attr('onKeyUp', 'showHint' + (index + 1) + '(this.value)');
            $(this).find("input[onkeydown*='showHintqty']").attr('onkeydown', 'showHintqty' + (index + 1) + '(this.value)');
            $(this).find("input[id*='item_name']").attr('id', 'item_name' + (index + 1));
            $(this).find("input[id*='quantity']").attr('id', 'quantity' + (index + 1));
            $(this).find("input[id*='item_code']").attr('id', 'item_code' + (index + 1));
        })
    });
});

$(document).on('keyup', '.quantity, .net_rate, .Tax_Amount, .Discount_rate, .Discount_tax, .Gross_Amount', function () {
    var parent = $(this).closest('.one');
    calculate(parent);
})

function calculate(e){
    var q = +$(e).find('.quantity').val();
    var n = +$(e).find('.net_rate').val();
    var t = +$(e).find('.tax').val();
    var dr = +$(e).find('.Discount_rate').val();
    var dt = +$(e).find('.Discount_tax').val();
    var sum = 0;

    $(e).find('.Gross_Amount').val(q * n);
    $(e).find('.Tax_Amount').val((g = q * n * t / 100).toFixed(2));
    $(e).find('.total').val(((q * n) + g).toFixed(2));

    $('.total').each(function(i, e){
        sum += +$(e).val();    
    });

    var disc = $('.Discount_rate').val();
    if (parseInt(disc) >= 0) {
        $('.Discount_tax').val('');
        $('#Grand').val((sum - $('.Discount_rate').val()).toFixed(2));
    } else {
        $('.Discount_rate').val('');
        disc = $('.Discount_tax').val();
        if ((disc) > 0)
            $('#Grand').val((sum - ((disc) * sum / 100)).toFixed(2));
        else
            $('#Grand').val((sum).toFixed(2));
    }
};

Answer 1

The code you want is a validation code

/*Intercepts the form submision*/
$('#myform').submit(function(e) {
  /*sets send to true*/
  var send = true;
  /*foreach required element*/
  $('.required').each(function() {
    /*check if input is valid*/
    if (!$(this).val()) {
      /*if not valid, don't send and mark red*/
      send = false;
      $(this).css('background-color', 'red');
    } else {
      /*if valid, take away mark*/
      $(this).css('background-color', 'none');
    }
  });
  /*if don't send, prevent sending*/
  if (!send) {
    e.preventDefault();
    return false;
  } else {
      alert('sent');
  }
});

$(document).ready(function() {
  $(".add").click(function() {
    var length = $('.one').length;
    var cloned = $(this).closest('.one').clone(true);
    cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
    cloned.find(':input:not(".sno")').val("");

    cloned.find("input[onKeyUp*='showHint']").attr('onKeyUp', 'showHint' + (length + 1) + '(this.value)');
    cloned.find("input[onkeydown*='showHintqty']").attr('onkeydown', 'showHintqty' + (length + 1) + '(this.value)');
    cloned.find("input[id*='item_name']").attr('id', 'item_name' + (length + 1));
    cloned.find("input[id*='quantity']").attr('id', 'quantity' + (length + 1));
    cloned.find("input[id*='item_code']").attr('id', 'item_code' + (length + 1));


    var parent = $(this).closest('.one');
    calculate(parent);
  });
  $('.delete').click(function() {
    if ($('.one').length == 1) {
      alert("This is default row and can't deleted");
      return false;
    }
    var parent = $(this).closest('.one');
    $(this).parents(".one").remove();
    calculate(parent);
    // reset serial numbers again
    $('.one').each(function(index, item) {
      $(this).find('.sno').val(index + 1);

      $(this).find("input[onKeyUp*='showHint']").attr('onKeyUp', 'showHint' + (index + 1) + '(this.value)');
      $(this).find("input[onkeydown*='showHintqty']").attr('onkeydown', 'showHintqty' + (index + 1) + '(this.value)');
      $(this).find("input[id*='item_name']").attr('id', 'item_name' + (index + 1));
      $(this).find("input[id*='quantity']").attr('id', 'quantity' + (index + 1));
      $(this).find("input[id*='item_code']").attr('id', 'item_code' + (index + 1));

    })
  });
});

$(document).on('keyup', '.quantity, .net_rate, .Tax_Amount, .Discount_rate, .Discount_tax, .Gross_Amount', function() {
  var parent = $(this).closest('.one');
  calculate(parent);
})


function calculate(e) {
  var q = +$(e).find('.quantity').val();
  var n = +$(e).find('.net_rate').val();
  var t = +$(e).find('.tax').val();
  var dr = +$(e).find('.Discount_rate').val();
  var dt = +$(e).find('.Discount_tax').val();
  var sum = 0;


  $(e).find('.Gross_Amount').val(q * n);
  $(e).find('.Tax_Amount').val((g = q * n * t / 100).toFixed(2));
  $(e).find('.total').val(((q * n) + g).toFixed(2));



  $('.total').each(function(i, e) {
    sum += +$(e).val();
  });



  var disc = $('.Discount_rate').val();
  if (parseInt(disc) >= 0) {
    $('.Discount_tax').val('');
    $('#Grand').val((sum - $('.Discount_rate').val()).toFixed(2));
  } else {
    $('.Discount_rate').val('');
    disc = $('.Discount_tax').val();
    if ((disc) > 0) $('#Grand').val((sum - ((disc) * sum / 100)).toFixed(2));
    else $('#Grand').val((sum).toFixed(2));

  }

};


/*Intercepts the form submision*/
$('#myform').submit(function(e) {
  /*sets send to true*/
  var send = true;
  /*foreach required element*/
  $('.required').each(function() {
    /*check if input is valid*/
    if (!$(this).val()) {
      /*if not valid, don't send and mark red*/
      send = false;
      $(this).css('background-color', 'red');
    } else {
      /*if valid, take away mark*/
      $(this).css('background-color', 'none');
    }
  });
  /*if don't send, prevent sending*/
  if (!send) {
    e.preventDefault();
    return false;
  } else {
    alert('sent');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id='myform' method='post'>
  <div id="mainDiv">
    <div class="one">
      <div class="row">
        <div class="input-field col s1">
          <input type="text" class="sno" name="sno[]" value="1" readonly>
          <label for="Sr">Sr</label>
        </div>
        <div class="input-field col s2">
          <input id="item_code" type="text" name="item_code[]" onKeyUp="showHint(this.value)" class='required'>
          <label for="item_code">Item Code</label>
        </div>
        <div class="input-field col s2">
          <input id="item_name" type="text" name="item_name[]" class='required'>
          <label for="item_name">Item Name</label>
        </div>
        <div class="input-field col s1 add">
          <a href="#">Add</a>

        </div>
        <div class="input-field col s1 delete">
          <a href="#"> Remove</a>

        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s2">
      <button class="btn cyan waves-effect waves-light right" type="submit" name="submit" onClick="return purchasebill_validation_print();" />Save<i class="mdi-content-send right"></i>
      </button>
    </div>
  </div>
</form>