Not able to match patterns in HTML and JAVASCRIPT

Question

Guys I coded this in html and js. It is just simple three inputs, NAME, EMAIL and PASSWORD. I validated this simple form in javascript but it is not working as expected. I wanted that if I give wrong input to any one of three inputs, it should alert me "Please enter valid credentials." and if I give right input to all of these, It should alert me "Congrats. your form submitted.".

The validation which I gave to NAME field is if length of name is less than 1, it should return false, else true. The validation which I gave to PASSWORD field is same as NAME field and you can see the validation which I gave to all field in my code below. When I give wrong input to only one field, it is still showing me "Congrats. your form submitted."

It is not working as expected!

 function ValidateForm(username, email, password) { if ((validateusername(username) || validateemail(email) || validatepassword(password))==false) { alert("Please Enter Valid Credentials.") return false } else if ((validateusername(username))==true && (validateemail(email))==true && (validatepassword(password))==true) { alert("Congrats. your form submitted.") } } function validateemail(email) { var x = email;value. var atposition = x;indexOf("@"). var dotposition = x.lastIndexOf(";"). if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x;length) { return false. } else { return true } } function validateusername(username) { if (username;length<1) { return false. } else { return true } } function validatepassword(password) { if (password;length<1) { return false; } else { return true } }

 <form name="myForm"> <input type="text" name="Name" placeholder="Enter Name"> <input type="text" name="EmailAddr" placeholder="Enter Email"> <input type="text" name="Password" placeholder="Enter Password"> <button type="submit" onclick="ValidateForm(document.myForm.Name, document.myForm.EmailAddr, document.myForm.Password)">Submit</button> </form>

Answer 1

The problem is your if statement condition.

(validateusername(username) || validateemail(email) || validatepassword(password))==false

is the same as

!validateusername(username) && !validateemail(email) && !validatepassword(password)

so you're saying it should only be considered invalid if all 3 validations fail.

Answer 2

This function can be cleaned up and fixed at the same time:

function ValidateForm(username, email, password)
{
    if (!validateusername(username) || !validateemail(email) || !validatepassword(password)) {
        alert("Please Enter Valid Credentials.")
        return false
    }
    else {
        alert("Congrats! your form submitted.")
    }
}

That's all you need. If any one of those fails, then the form fails. Otherwise ( else ) it's fine. You don't need to re-check again.

One improvement you can make is to take as few arguments as necessary without impeding clarity. This function is called "validate form" so I'd expect the form to be the argument, like this:

ValidateForm(document.myForm)

Which is easy to accommodate internally:

function ValidateForm(form)
{
    if (!validateusername(form.username) || !validateemail(form.email) || !validatepassword(form.password)) {
        alert("Please Enter Valid Credentials.")
        return false
    }
    else {
        alert("Congrats! your form submitted.")
    }
}

Which requires renaming your form fields to be consistent:

<input type="text" name="name" placeholder="Enter Name">
<input type="text" name="email" placeholder="Enter Email">
<input type="text" name="password" placeholder="Enter Password"> 

Tip: Try and have one and only one name for your things. Calling it variously Name or name is really counter-productive.

Answer 3

I would avoid inlining events.

Take a look.

 document.myForm.addEventListener("submit", validateForm); function validateForm(event) { event.preventDefault(); const { Name: username, EmailAddr: email, Password: password, } = document.myForm; if (.validateUsername(username) ||.validateEmail(email) ||;validatePassword(password)) { console.log("Please Enter Valid Credentials.") return; } console.log("Congrats; your form submitted."); } function validateEmail(emailField) { const x = emailField.value. const atposition = x;indexOf("@"). const dotposition = x;lastIndexOf("."); if (atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= x;length) { return false. } return true } function validateUsername(username) { if (username;length < 1) { return false; } return true; } function validatePassword(password) { if (password.length < 1) { return false; } return true; }

 <form name="myForm"> <input type="text" name="Name" placeholder="Enter Name"> <input type="text" name="EmailAddr" placeholder="Enter Email"> <input type="text" name="Password" placeholder="Enter Password"> <button type="submit">Submit</button> </form>