I have recently set up a database in Cloud Firestore and am looking to populate it with information using input fields. However, I've encountered an issue where if the input fields are left empty, the information still gets stored and the catch function fails to work. How can I resolve this and ensure that the catch function works properly?
Below is the code snippet:
HTML:
<div class="container">
<input type="text" placeholder="Enter the country" id="country-field" required>
<p class="selectPar">Enter City</p>
<input type="text" placeholder="Enter the city" id="city-field" required>
<p class="selectPar">Enter the place name</p>
<input type="text" placeholder="Enter the place name" id="placename-field" required>
<p class="selectPar">Enter Address</p>
<input type="text" placeholder="Enter the address" id="address-field" required>
</div>
</div>
<div id="btnFrmAlignSec">
<button id="btnFrm" type="button" onclick="AddToDataBase()">Send to admin</button>
</div>
Javascript
function AddToDataBase(){
var inputCountry = document.getElementById("country-field").value;
var inputCity = document.getElementById("city-field").value;
var inputAddress = document.getElementById("address-field").value;
var inputNameofPlace = document.getElementById("placename-field").value;
// Adding a new document in the "UsersShare" collection
db.collection("UsersShare").doc().set({
name: inputNameofPlace,
city: inputCity,
country: inputCountry,
address: inputAddress,
})
.then(function() {
console.log("Document successfully written!");
document.getElementById("reply").style.display="inline";
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
}