I'm stumped on HTML form working on why it is only send to the database if the email is NOT valid. I would like it to only work IF the email is valid. If it's a valid email, it doesn't end up in the db. There must be something I'm missing. I'm new to HTML and JS. Any suggestions will help. Thank you
<form class="contact-form">
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="name" name="name" placeholder="Name">
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="email" id="email" name="email" placeholder="E-mail">
</div>
<div class="col-md-12">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
<div class="col-md-12">
<div class="center-holder">
<button id="submit_msg" type="submit">Send Message</button>
</div>
</div>
</form>
<!-- Form End -->
Here is JS file
var firebaseConfig = {
apiKey: "xxxxx",
authDomain: "https://xxxxx",
databaseURL: "https:/xxxxx.firebaseio.com/",
projectId: "xxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(firebaseConfig);
var push_to_firebase = function(data){
var db = firebase.firestore();
db.collection("messages").add({
name: data["name"],
email: data["email"],
message: data["msg"],
timestamp: Date.now()
})
}
var contact_submit = function(){
var name = document.getElementById("name");
var email = document.getElementById("email");
var msg = document.getElementById("message");
var data = {
"name": name.value,
"email": email.value,
"msg": msg.value
}
push_to_firebase(data);
}
document.getElementById("submit_msg").addEventListener("click", contact_submit);
})();
you can validate email first before saving in firebase
const validateEmail = (email) => {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
};
// run this function first, if it returns true then continue to save in database