如果文本框值超过可用的最大值，我的代码会弹出一个模态，但允许用户在关闭模式后单击另一个框。然后在下一次单击时再次弹出验证模式。基本上显示验证消息，但允许用户无论如何单击保存按钮。为什么onBlur只会启动其他所有点击？在错误解决之前，我需要做什么才能阻止用户继续？如果我设置焦点，程序就会循环。
$(document).ready(function() {
// bind the popovers to show the content
$('.JOHN_formButtonPopover').popover({
trigger: "hover",
placement: "top"
});
// calculations to do when numbers are entered in the text boxes
$(document).on('blur', '.JOHN_textInput', function() {
var $this = $(this);
var totalAVAILEntered = 0;
var hasError = false;
// cycle through the textboxes to add up the numbers in them to subtract from the total available
$('.JOHN_textInput').each(function() {
var $textBox = $(this);
// if the textbox isn't empty, try to parse the content as a number
if ($textBox.val() != "") {
var currentValue = parseInt($textBox.val());
// if it is a valid number, add to the total to subtract from the overall available
if (currentValue >= 0) {
totalAVAILEntered += currentValue;
}
// else, there is an error. Show appropriate message in a modal
else {
$('#JOHN_informationDetails').text('Number is either invalid or negative!');
$('#modal_informationMessage').modal('show');
hasError = true;
return;
}
}
});
// If all numbers were parsed correctly, do appropriate calculations
if (!hasError) {
var initialAVAILAvailable = parseInt($('#JOHN_totalAVAILAvailable').attr('data-initialAmountLeft'));
var initCategoryDollars = parseInt($('#hiddenInitialValue').attr('data-InitialCategoryDollars'));
// numbers add up to 0 - keep original available entered from page load
if (totalAVAILEntered == 0) {
$('#JOHN_totalAVAILAvailable').text(initialAVAILAvailable);
$('#JOHN_informationDetails').text('At least one category must have an amount.');
$('#modal_informationMessage').modal('show');
} else if (totalAVAILEntered <= initialAVAILAvailable) {
$('#JOHN_totalAVAILAvailable').text(initialAVAILAvailable - totalAVAILEntered + initCategoryDollars);
}
// else, the user entered a number too large. Inform them that they need to adjust the amount entered
else {
var message = 'The amount entered is too high. You cannot enter this much';
CreateInformationMessage(message);
}
}
});
});
以下是呈现的HTML：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h3>Total Available : $<span data-initialamountleft="353960" id="JOHN_totalAvailable">353960</span></h3>
</div>
</div>
<form>
<input data-initialcategorydollars="4440" id="hiddenInitialValue" type="hidden"><br>
</form>
<div class="row">
<div class="col-lg-12 col-md-12 text-left">
<div class="col-lg-3 col-md-3"></div>
<div class="row">
<div class="col-lg-3 col-md-3 text-left">
<label class="JOHN_textLabel" for="categoryTypeDDnew_CategoryType_4_">21** ( Travel )</label>
</div>
<div class="col-lg-3 col-md-3 text-right">
<div class="input-group">
<div class="input-group-addon">
$
</div><input class="form-control JOHN_textInput text-right" data-val="true" data-val-number="The field Decimal must be a number." data-val-required="The Decimal field is required." id="CategoryType_CategoryType_4" name="categoryDollarsNew[CategoryType_4]" placeholder="Enter a Number..." type="text" value="100.0000">
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
<div class="col-lg-3 col-md-3"></div>
<div class="row">
<div class="col-lg-3 col-md-3 text-left">
<label class="JOHN_textLabel" for="categoryTypeDDnew_CategoryType_2_">23** ( Contractual )</label>
</div>
<div class="col-lg-3 col-md-3 text-right">
<div class="input-group">
<div class="input-group-addon">
$
</div><input class="form-control JOHN_textInput text-right" data-val="true" data-val-number="The field Decimal must be a number." data-val-required="The Decimal field is required." id="CategoryType_CategoryType_2" name="categoryDollarsNew[CategoryType_2]" placeholder="Enter a Number..." type="text" value="1260.0000">
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
<div class="col-lg-3 col-md-3"></div>
<div class="row">
<div class="col-lg-3 col-md-3 text-left">
<label class="JOHN_textLabel" for="categoryTypeDDnew_CategoryType_1_">25** ( Contractual )</label>
</div>
<div class="col-lg-3 col-md-3 text-right">
<div class="input-group">
<div class="input-group-addon">
$
</div><input class="form-control JOHN_textInput text-right" data-val="true" data-val-number="The field Decimal must be a number." data-val-required="The Decimal field is required." id="CategoryType_CategoryType_1" name="categoryDollarsNew[CategoryType_1]" placeholder="Enter a Number..." type="text" value="3000.0000">
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
<div class="col-lg-3 col-md-3"></div>
<div class="row">
<div class="col-lg-3 col-md-3 text-left">
<label class="JOHN_textLabel" for="categoryTypeDDnew_CategoryType_3_">26** ( Supplies )</label>
</div>
<div class="col-lg-3 col-md-3 text-right">
<div class="input-group">
<div class="input-group-addon">
$
</div><input class="form-control JOHN_textInput text-right" data-val="true" data-val-number="The field Decimal must be a number." data-val-required="The Decimal field is required." id="CategoryType_CategoryType_3" name="categoryDollarsNew[CategoryType_3]" placeholder="Enter a Number..." type="text" value="40.0000">
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
<div class="col-lg-3 col-md-3"></div>
<div class="row">
<div class="col-lg-3 col-md-3 text-left">
<label class="JOHN_textLabel" for="categoryTypeDDnew_CategoryType_5_">31** ( Equipment )</label>
</div>
<div class="col-lg-3 col-md-3 text-right">
<div class="input-group">
<div class="input-group-addon">
$
</div><input class="form-control JOHN_textInput text-right" data-val="true" data-val-number="The field Decimal must be a number." data-val-required="The Decimal field is required." id="CategoryType_CategoryType_5" name="categoryDollarsNew[CategoryType_5]" placeholder="Enter a Number..." type="text" value="40.0000">
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-md-7 text-left"></div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 text-right">
<button class="btn btn-primary JOHN_formButtonPopover" data-content="Save your plan, but do not submit it for review." data-toggle="popover" id="button_SavePlan" name="button_SavePlan" onclick="SavePlan();">Save</button> <button class="btn btn-default JOHN_formButtonPopover" data-content="Discard changes and return to listing screen." data-toggle="popover" id="button_Cancel" name="button_Cancel" onclick="Cancel();">Cancel</button>
</div>
</div>
</body>
</html>