Question

我有一个包含三个输入字段的表单。其中两个将用于计算总和，并且此值将插入第三个输入字段。此表单将使用jQuery验证插件进行验证。我正在使用keyup事件，以便在上述两个字段中插入数字后可以立即生成总和。但是，当我编辑第三个值并将其保留为空时，不会显示验证错误。如果为空，如何使验证错误可见？

HTML：

<input type="text" id="value_1" name="value_1" class="input">

<span id="value_1_msg"></span>

<input type="text" id="value_2" name="value_2" class="input">

<span id="value_2_msg"></span>

//This field will contain the sum of the two numbers above.

<input type="text" id="value_3" name="value_3">

<span id="value_3_msg"></span>

JS：

$(".input").keyup(function () {
    var value_1 = +$("#value_1").val();
    var value_2 = +$("#value_2").val();
    var value_3 = value_1 + value_2;
    if (isNaN(value_3) == false) {
        $("#value_3").val(value_3);
        $('#value_3').removeClass('form-error');
        $("#value_3_msg").hide(); //the error message is hidden if the sum value is set
    }
    else {
        $("#value_3").val("Error");
    }
});

//jquery validation
$("#myForm").validate({
    errorClass: "invalid form-error",
    errorElement: 'div',
    errorPlacement: function (error, element) {
        if (element.attr("name") == "value_1") {
            error.appendTo($('#value_1_msg'));
        }
        else if (element.attr("name") == "value_2") {
            error.appendTo($('#value_2_msg'));
        }

        else if (element.attr("name") == "value_3") {
            error.appendTo($('#value_3_msg'));
        }
    },
    rules: {
        value_1: {
            required: true,
        },
        value_2: {
            required: true,
        },
        value_3: {
            required: true,
        },
    },
    messages: {
        value_1: {
            required: "Enter Value 1",
        },
        value_2: {
            required: "Enter Value 2",
        },
        value_3: {
            required: "Enter Value 3",
        },
    },

    //code for remaining form is here...

回到问题，当用户在第一和第二输入字段中输入值时，将使用JS代码生成第三值。但是，第三个字段也是可编辑的。因此，当用户将此字段留空时，将出现验证错误。但是现在，事实并非如此。有什么建议吗？

Answer 1

我不知道您的其他代码，因为出现语法错误，而且我不会对其进行调试。但是下面是对更改做出反应的代码，并且仅当字段为空时才执行某些操作。

document.getElementById("value_3").addEventListener("change", myFunction);

function myFunction() {
var strValue = document.getElementById('value_3').value;
    //console.log(strValue);
if (strValue === "") {
    //do somehting
    console.log("empty");
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="value_1" name = "value_1" class = "input">   
<span id="value_1_msg"></span>

<input type="text" id="value_2" name = "value_2" class = "input">   
<span id="value_2_msg"></span>

//This field will contain the sum of the two numbers above.

<input type="text" id="value_3" name = "value_3">   
<span id="value_3_msg"></span>

尝试添加某些内容，然后将其从该字段中删除。顺便说一句，如果您希望输入字段不可编辑，那么在使用JS计算时，我在这些字段上使用了HTML readonly，但我仍然可以提交总计。让用户能够编辑计算总数没有意义。

输入字段为空时显示验证错误

1 个答案: