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