Javascript if function only checks for one variable despite ||

I am using php, javascript and html to create a website where logged in users can comment in a chatbox. I am trying validate the input email during account creation by checking if it includes '@' and '.'. The call to the function is within an html file. The form (wrapper and body excluded looks like this:

<form id="form" onsubmit="HandleSubmit(event)" action="accountcreation.php" method="POST">
                 
    <label for="email">Email:</label>
    <br>
    <input type="text" id="email" name="email" required>
    <br>
    <label for="password">Password:</label>
    <input type="password" name="password" required>
    <br>
    <br>
    <button type="submit">Create account</button>
            
    </form>

The function is being called below:

<script src="validate.js"></script>
<script>
    function HandleSubmit(e) {
        console.log("OnSubmit");

        // Validation
        if (!ValidateEmail("email")) {
            e.preventDefault();
            alert("Invalid input of email");
            return false;
        }

    }
</script>

In the validate.js file the function is contructed like this:

function ValidateEmail(emailinputId) {

    const elem = document.getElementById(emailinputId);
    if ( !elem.value.includes(".") || !elem.value.includes("@")) {
        return false;
    }
    
    return true;

}

The webpage only sends and alert when the '@' sign is missing but is fine with '.' missing.
I need to solve this within a day so I'm praying for a saviour.

I have tried with both && and || which didn't work.
I tried separating the '.' and '@' checks into separate if statements within the same function which didn't work.

I changed it to an alternate version:

function ValidateEmail(emailinputId) {

    const elem = document.getElementById(emailinputId);
    
    if ( ("." in elem ) && ("@" in elem)) {
        return true;
    }
    
    return false;

}

And called to it in the same way.

Same thing happens. What is the issue?

The issue you're experiencing lies within your usage of the logical operators in your condition. In your first ValidateEmail function, you're using the AND operator (&&), meaning both conditions have to be false to return false. So if any of the characters (either "." or "@") is present, it would return true which is not the behavior you want.

Here's a modified version of your function:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function ValidateEmail(emailinputId) {
  const elem = document.getElementById(emailinputId);
  
  return elem.value.includes(".") && elem.value.includes("@");
}

function HandleSubmit(e) {
  console.log("OnSubmit");

  // Validation
  if (!ValidateEmail("email")) {
    e.preventDefault();
    alert("Invalid input of email");
    return false;
  }
}

<!-- language: lang-html -->

<form id="form" onsubmit="HandleSubmit(event)" action="accountcreation.php" method="POST">

  <label for="email">Email:</label>
  <br>
  <input type="text" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
    <br>
  <input type="password" name="password" required>
  <br>
  <br>
  <button type="submit">Create account</button>
</form>

<!-- end snippet -->