'I want to show validations messages on popover if there is multiple conditions then it not updating popover content

I want to show validations messages on popover if there is multiple conditions then it not updating popover content. In this form there is 2 field first name and last name for first name there is 2 validations one is required and other is contain more then 4 characters

for the display validations message i use popover

i have design form like follow

 <form onsubmit="return validate()">
        <div class="container">
            <div class="row  p-2">
                <div class="col-md-6">
                    **first name**
                    <div class="form-group">
                        <label for="">First Name</label>
                        <input type="text" class="form-control" name="firstName" id="firstName"
                            aria-describedby="helpId" placeholder="">
                    </div>
                </div>
                <div class="col-md-6">
                    **last name**
                    <div class="form-group">
                        <label for="">Last Name</label>
                        <input type="text" class="form-control" name="lastName" id="lastName" aria-describedby="helpId"
                            placeholder="">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 center">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </form>

here the script that use for validations

function validate() {
    var firstName = $('#firstName').val();
    var lastName = $('#lastName').val();
    var status = true;

validations conditions if (firstName == "") { $('#firstName').popover({ content: "Please enter your first name", placement: "bottom" }); $('#firstName').popover('show'); status = false; } else if (firstName.length < 4) { $('#firstName').popover({ content: "Name lenght should be minimum 4 characters", placement: "bottom" }); ** this popover content not update ** $('#firstName').popover('show'); status = false; } else { $('#firstName').popover('hide'); status = true; }

    if (lastName == "") {
        $('#lastName').popover({ content: "Enter Surname ", placement: "bottom" });
        $('#lastName').popover('show');
        status = false;
    } else {
        $('#lastName').popover('hide');
        status = true;
    }

    return status;
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source