How do I show a message by opening a kendo popup? - validation

Question

In my form, there are 3 input values ​​in the period line. If all of them are empty or zero, I want to give a warning in the kendo popup before clicking the button.If a non-zero value is entered for any of them, it will not give an error.
3 input values for period in form
My code is as below :
<form id="formPlan" onsubmit="return hasValue()" class="form-horizontal form-group-sm" data-toggle="validator">
<div class="form-group required">
<label for="inPeriod" class="control-label col-xs-3">#ln.label_period:</label>
<div class="col-xs-4 input">
<div class="row">
<div class="col-xs-4">
<input type="number" id="inPeriod_day" name="Period" class="form-control" max="365" step="any" maxlength="2" style="width:100%">
</div>
<div class="col-xs-4">
<input type="number" id="inPeriod_hour" name="PeriodHour" class="form-control" max="23" step="any" maxlength="2">
</div>
<div class="col-xs-4">
<input type="number" id="inPeriod_minute" name="PeriodMinute" class="form-control" max="59" step="any" maxlength="2">
</div>
</div>
</div>
</form>
<div id="popup">Periods can't be blank!</div>
<script>
$("#popup").kendoPopup({
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
}
});
function hasValue() {
var period = document.forms["formPlan"]["Period"].value;
var periodhour = document.forms["formPlan"]["PeriodHour"].value;
var periodminute = document.forms["formPlan"]["PeriodMinute"].value;
if (!period && !periodhour && !periodminute) {
$("#popup").data("kendoPopup").open();
return false;
}
return true;
}
</script>