如何通过验证添加/删除行

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>