附加框的表单验证

时间:2011-07-04 09:07:04

标签: jquery

我正在使用以下表单字段

<li><input type="text" name="name" /></li>
<li><input type="text" name="city" /><li>
<li><input type="text" name="fees" class="num" id="fees" /><li>
<li><input type="text" name="openbal" class="num" id="openbal" /><li>
<li><input type="text" name="discount" class="num" id="disc" /><li>
<li><input type="text" name="netpay" id="netpay" /><li>
<li>  <ul id="fields"></ul>  </li>
<button type="submit" name="submit" id="upload"><span>submit</span></button>

关注jquery代码...

$(document).ready(function(){
$('.num').blur(function () {
var fees    = parseInt($('#fees').val()) || 0;
var openbal = parseInt($('#openbal').val());
var disc    = parseInt($('#disc').val());
var netpay  = parseInt(fees+openbal-disc) || 0;
$('#netpay').val(netpay);
});
});

$(document).ready(function() {
$('#instal').bind('textchange', function (event, previousText) {
    var instalval = parseInt($(this).val());
    if($('#fields').children().hasClass('inputs')) {
    $('.inputs').remove();
    }
    if(instalval != '') {
    for( i = 0; i < instalval; i++) {
        $('#fields').append('<li class="inputs clearfix"><input type="text" class="small date" size="30" name="payment[date][]" placeholder="Date" /> <input type="text" class="xsmall rfee" size="30" name="payment[regfee][]" placeholder="Reg. Fee" /> <input type="text" class="xsmall tfee" size="30" name="payment[tutfee][]" placeholder="Tut. Fee" /> <input type="text" class="small totalfee" size="30" name="payment[total][]" placeholder="Total" /> <span title="Remove this" class="ui-icon ui-icon-closethick closefield"></span> </li>');
$(".rfee,.tfee").keyup(function() {
var $li = $(this).closest("li");
var rfee = parseFloat($li.find(".rfee").val());
var tfee = parseFloat($li.find(".tfee").val());
if(isNaN(rfee)) rfee = 0;
if(isNaN(tfee)) tfee = 0;
$li.find(".totalfee").val(rfee + tfee);
});
    }
    }  
});
$('.closefield').live('click', function() {
$(this).parent().remove();
});
});

$(function() {
$("#addstudent").submit(function() {
if ($("#upload span").text() == "submit") {
    alert("Please confirm if everything is correct");
    $("#upload span").text("confirm");
    // Top of the PAGE
    $(document).scrollTop(0);
    // Top of the FORM
    /* $(document).scrollTop( $("#uguu").offset().top ); */  
    return false;
}
});
});

现在我正在努力实现以下验证......

#netpay must be equal to appended sum of .totalfee

我的意思是分期付款计划不应大于应付净额。

希望你有了这个想法,我希望有代码帮助实现它。谢谢。

1 个答案:

答案 0 :(得分:0)

嗯,代码可能如下所示:

var netpay = parseFloat($('#netpay').val());

var totalFree = 0;

$('.totalFree').each(function(){
   totalFree += parseFloat($(this).val());
}

if (totalFree > netpay){
//do not submit
}else{
//submit
}

编辑 - 我认为您应该像这样编辑提交功能:

$(function() {
$("#addstudent").submit(function() {
var netpay = parseFloat($('#netpay').val());

var totalFree = 0;

$('.totalFree').each(function(){
   totalFree += parseFloat($(this).val());
}

if (totalFree > netpay){
     //do not submit
     alert('your netpay must not exceed the sum of your totalFree');
     return false;
}else{
    if ($("#upload span").text() == "submit") {
    alert("Please confirm if everything is correct");
    $("#upload span").text("confirm");
    // Top of the PAGE
    $(document).scrollTop(0);
    // Top of the FORM
    /* $(document).scrollTop( $("#uguu").offset().top ); */  
    return false;
    }
}
});
});