Question

我正在构建表单。

我有两个输入字段（#totalIncome和#totalExpenses）。在用户能够发送表单之前，我需要确认这两个字段的值等于等式#totalIncome > #totalExpenses。我正在努力使用jQuery。

如果#totalIncome不大于#totalExpenses，我想在#validation div中显示错误消息（对于此示例，它应显示＆＃34;收入较低比费用＃34;）。我还想禁用提交按钮#submit-suggestion。

如果#totalIncome实际上大于#totalExpenses，我只希望#submit-suggestion - 按钮正常运行。

到目前为止，这是我的代码：

$('#validation').change(function() {
    if ($('#totalIncome').val() < $('#totalExpenses').val()) {
        $('#validation').val('Income is lower than expenses.')
        $('#submit-suggestion').prop("disabled", true);
    } else {
        $('#submit-suggestion').prop("disabled", false);
    }
});

Answer 1

$('#totalIncome, #totalExpenses').change(function() {
    if (parseFloat($('#totalIncome').val()) < parseFloat($('#totalExpenses').val())) {
        $('#validation').val('Income is lower than expenses.')
        $('#submit-suggestion').prop("disabled", true);
    } else {
        $('#submit-suggestion').prop("disabled", false);
    }
});

Answer 2

您应该使用parseFloat来获取输入的十进制值。

if ( parseFloat($('#totalIncome').val()) 
                    < parseFloat($('#totalExpenses').val())) {

要显示错误，您最初可能会有一个空白的p元素，然后，为了显示错误，请将其innerHTML设置为"Error!Error!"。类似的东西：

else {
    $('#submit-suggestion').prop("disabled", false);
    $('#error-box').html("Error!"); 
    // or $('#error-box')[0].innerHTML = "Error";
}

此外，您可能希望触发按钮的验证功能change，而不是收听onclick事件。

jQuery：输入字段中值的验证

2 个答案: