I am writing a HTML/CSS/JavaScript program that should show a form that asks for the Full Name and the Birthday Date and then it checks if the input is empty. If the input is empty we should get an alert message.
I have written the following code but I get no alert message. I don't know where the problem is.
function FormValidation() {
var Name=document.getElementById("Name").value;
if (Name == ""){
alert("Please enter your name!");
return false;
}
var BDate=document.getElementById("BDate").value;
if (BDate == ""){
alert("Please enter your BirthdayDate!");
return false;
}
}body {
background-color: #90AFC5;
color: black;
width: 400px;
}<form onSubmit="return FormValidation()">
<table class="information">
<tr>
<td><label for="Name">Full Name</label></td>
<td> <input type="text" id="Name" name="Name"><br><br></td>
</tr>
<tr>
<td><label for="BDate">Birthday Date</label></td>
<td><input type="text" id="BDate" name="BDate"><br><br></td>
</tr>
</table>
<input type="submit" style="border-radius:15px;width:40%;background-color:green;text-align:center;color:white" value="Submit" onclick="FormValidation()">
</form>/* use querySelector() method to select the input fields and the form */
const fullName = document.querySelector('#fname');
const birthDay = document.querySelector('#bday');
const form = document.querySelector('#myForm');
/* Before submting the form, develop two functions for validating values of the form fields */
//Validate the fullName field
const validateFullName = () => {
if (!fullName.value.trim()) {
console.log('Full name is required');
return false;
} else {
return true;
}
}
//Validate the birthDay field
const validateBirthDay = () => {
if (!birthDay.value.trim()) {
console.log('Birthday is required');
return false;
} else {
return true;
}
}
/* Attach the submit event listener to the form by using the addEventListener() method
In the event listener, you need to call the e.preventDefault()
to prevent the form from submitting once the submit button is clicked */
form.addEventListener('submit', function(e) {
if (!validateFullName() || !validateBirthDay()) {
//Prevent the form from submitting
e.preventDefault();
return
}
});<form method="post" id="myForm">
<input type="text" class="form-control" id="fname" name="fname"><br/>
<input type="text" class="form-control" id="bday" name="birthday"><br/>
<button type="submit" name="send">submit</button>
</form>Your logic need modifications. for demonstrations purpose only please follow this logic.
Select the form fields and add the submit event listener
I.e. use the document.querySelector() method to select the input fields and the form
Attach the submitevent listener to theformby using theaddEventListener()` method
In the event listener, call the e.preventDefault() to prevent the form from submitting once the submit button is clicked.
Develop functions to validate input fields || check if input fields are empty otherwise submit the form