I get no alert from Validation Form - Why?

Question

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>

I don't think there should be return in onsubmit attribute. Check this out, here it works fine: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit — Jacek Ratajewski, Sep 13 '21 at 13:54
I've moved your code inside a snippet. When pressing the button the alert shows as expected. — 0stone0, Sep 13 '21 at 13:57
There must be also an other mistake at my code, because I still don't get an alert message. I just get " The file you asked for does not exist" . What else could be wrong? @JacekRatajewski — pingu, Sep 13 '21 at 13:58
@JacekRatajewski There definitely need to be a return in the onsubmit for an inline event handler that needs to disallow the event if false — mplungjan, Sep 13 '21 at 13:59
Recommendations: Do NOT use inline event handlers but use addEventListener on the submit event and preventDefault when error. Simpler: Add `required` to the form fields and remove the scripts — mplungjan, Sep 13 '21 at 14:01
You have validation onsubmit. Always use the submit event. In your case you run the validation twice, but the one on the click is useless - remove `onclick="FormValidation()"` — mplungjan, Sep 13 '21 at 14:01
But I want to get a specific message at the alert message. So we cannt not just add "required", can we? @mplungjan — pingu, Sep 13 '21 at 14:06
https://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message — mplungjan, Sep 13 '21 at 14:12

score 1 · Answer 1 · answered Sep 18 '21 at 05:27

/* 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

I get no alert from Validation Form - Why?

1 Answers1