Show validation error when an input field is empty

Question

I have a form that contains three input fields. Two of which will be used to calculate the sum and this value will be inserted in the third input field. This form will be validated using the jQuery validation plugin. I am using a keyup event so that the sum can be generated instantly after inserting figures in the two fields above. However, when I edit the third value and leave it empty, the validation error does not show up. How can I enable the validation error to be seen if empty?

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...

Coming back to the question, when the user inputs the values in the first and second input fields, the third value will be generated using the JS code. But, the third field is also editable. So, when the user leaves this field empty, the validation error should appear. But right now, it does not. Any advise?

Answer 1

I don't know about your other code as I get syntax errors And I am not gonna debug it. But below is code that reacts on change and do something only if filed is empty.

 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>

Try to add something then remove it from that field. BTW if you want input filed and to not be editable, I use HTML readonly on those fields when using JS calculations and I can still submit totals. There is no point in letting user to be able to edit total of calculation.