Мой проект состоит из регистрационной формы, и я использую Firestore для хранения моих данных.Когда я заполняю форму и отправляю данные, она не попадает в базу данных.Принимая во внимание, что если я оставлю одно из полей пустым, данные других полей будут успешно введены, а пустое поле будет установлено в ноль.Пожалуйста, смотрите коды и изображения ниже:
Коды:
//app.js
console.log("Initialisation Successful!");
var db = firebase.firestore();
function regUser() {
var uName = document.getElementById("name").value;
var email = document.getElementById("emailadd").value;
var gend = document.getElementById("sel_gender").value;
var pass = document.getElementById("password").value;
db.collection("Users").add({
userName: uName,
emailAddress: email,
gender: gend,
userPassword: pass
})
.then(function() {
console.log("Data entered successfully!");
})
.catch(function(error) {
console.error("Error!", error);
});
}
@font-face {
font-family: myFont;
src: url(CutiveMono-Regular.ttf);
}
@font-face {
font-family: myFont2;
src: url(MedievalSharp.ttf);
}
#main {
padding-top: 3%;
padding-bottom: 4%;
min-height: 90vh;
font-family: myFont;
font-size: 1.3em;
}
#bg {
background-image: url("images/1.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: rgba(255, 255, 255, 0.6);
background-blend-mode: lighten;
}
#reg {
color: white;
font-family: myFont2;
}
#nav {
border-style: solid;
border-width: 0px 0px 5px 0px;
border-color: orange;
}
#nav2 {
border-style: solid;
border-width: 5px 0px 0px 0px;
border-color: orange;
}
#row {
width: 100%;
}
#form {
border-style: solid;
border-width: 10px;
border-radius: 2%;
border-color: #F8F9FB;
background-color: #F8F9FB;
}
.form-check-label {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="bootstrap.css" />
<script src="bootstrap.js"></script>
<script src="jquery.js"></script>
<!--CSS-->
<style>
</style>
<!--/CSS-->
</head>
<body>
<!--Header-->
<div class="header">
<nav id="nav" class="navbar bg-dark">
<h2 id="reg"> Registration </h2>
</nav>
</div>
<!--/Header-->
<!--Main-->
<div class="bg" id="bg">
<div class="main" id="main">
<div class="row" id="row">
<div class="col-sm-4" id="col1"></div>
<div class="col-sm-4" id="col2">
<form action="" method="POST" id="form">
<div class="container">
<div class="form-group">
<label id="lblname" class="form-check-label" for="name"><b> First Name:</b>
<input id="name" name="name" class="form-control" type="text" placeholder="Insert Name" required>
</label><br>
<label id="lblemail" class="form-check-label" for="emailadd"><b> Email Address:</b>
<input id="emailadd" name="emailadd" class="form-control" type="email" placeholder="Insert Email Address" required>
</label><br>
<label id="lblgender" class="form-check-label" for="sel_gender"><b> Gender:</b>
<select class="form-control" id="sel_gender">
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</label><br>
<label id="lblpass" class="form-check-label" for="password"><b> Password:</b>
<input id="password" name="password" class="form-control" type="password" placeholder="Insert Password" required>
</label><br>
<label id="lblcnfrmpass" class="form-check-label" for="cnfrmpassword"><b> Confirm Password:</b>
<input id="cnfrmpassword" name="cnfrmpassword" class="form-control" type="password" placeholder="Re-insert Password">
</label><br><br>
<center>
<button type="submit" onclick="regUser()" class="btn btn-success">Register</button>
<button type="button" class="btn btn-secondary">Clear</button>
<button type="button" class="btn btn-info">Login Instead</button>
</center>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-4" id="col3"></div>
</div>
</div>
<!--/Main-->
<!--Footer-->
<div class="footer">
<nav id="nav2" class="navbar bg-dark">
</nav>
</div>
<!--Footer-->
<!--/Footer-->
<!--Firebase-->
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-firestore.js"></script>
<script>
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script src="app.js"></script>
<!--/Firebase-->
</body>
</html>
Изображение: на этом рисунке показан пример ввода данных без добавления пароля.Если пароль введен, данные не поступают в БД при отправке.
Изображение БД