Я реализовал несколько всплывающих окон, и я пытаюсь вызвать их через функцию, которая вызывается событием onclick.
Я понятия не имею, почему, но они исчезают через секунду. На самом деле мне удалось заставить их работать нормально при проверке каждого из них, но когда пользователь нажимает кнопку «отправить», это разочаровывает.
Любая идея, как и
HTML:
function fieldValidation(textBox){
if (textBox.value === "" || textBox === "") {
textBox.style.borderColor = "red";
$(textBox).popover('show');
}
else {
$(textBox).popover('hide');
textBox.style.borderColor = "green";
}
}
function formValidation(){
var fields = document.getElementsByClassName("personal").length;
var current, check = true;
for (var index = 0; index < fields ; index++) {
current = document.getElementsByClassName("personal")[index];
if(current.value === "") {
fieldValidation(current);
check = false;
}
}
if (!check)
return;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Academic Calculator</title>
<meta name="Calculator" content="Academic Calculator">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Libs/bootstrap.css">
<script src="Libs/http_code.jquery.com_jquery-2.0.0.js"></script>
<script src="Libs/bootstrap.js"></script>
<link rel="stylesheet" href="Calculate.css">
</head>
<body>
<script src="calculatorLogic.js"></script>
<div><h1>Academic Calculator</h1></div>
<div class="container-fluid">
<hr>
<div class="row">
<form>
<div class ="col-lg-1 col-md-2 col-sm-2 col-xs-12" >
<input class="personal" placeholder="First Name:" data-toggle="popover"
data-content="Please Fill First Name Correctly" onblur="fieldValidation(this)"
data-placement="top">
</div>
<div class ="col-lg-1 col-md-2 col-sm-2 col-xs-12">
<input class="personal" placeholder="Last Name:" data-toggle="popover"
data-content="Please Fill Last Name Correctly" onblur="fieldValidation(this)"
data-placement="top">
</div>
<div class = "col-lg-1 col-md-2 col-sm-2 col-xs-12">
<input class="personal" placeholder="Academic Institute:" data-trigger="popover"
data-content="Please Fill Academic Institute Correctly" onblur="fieldValidation(this)"
data-placement="top">
</div>
<div class = "col-lg-1 col-md-2 col-sm-2 col-xs-12">
<input class="personal" placeholder="School:" data-trigger="popover"
data-content="Please School Institute Correctly" onblur="fieldValidation(this)"
data-placement="top">
</div>
<div class = "col-lg-1 col-md-2 col-sm-2 col-xs-12 start-btn">
<input type="submit" class="submit" onclick="formValidation()">
</div>
</form>
</div>
<hr>
<div class="courses"></div>
</div>
</body>
</html>
Надеюсь, я правильно ввел код, впервые делая это с помощью сниппета.