Validation with html form only gives if statement

Question

No matter how many characters I enter, it only gives the if statement and not the else. is there a typo I entered somewhere I am not seeing, or does the function not work if there are two inputs?

 function valid_Function(){ var x, text; x = document.getElementById("name").value; if (isNaN(x) || x < 1 || x > 10) { text = "Input not valid"; } else { text = "Input OK"; } document.getElementById("valid").innerHTML = text; }

 form input { display: block; margin-top: 10px; } form [type="submit"] { padding: 5px; border-radius: 5px; border: none; background: skyblue; transition: .5s ease; } form [type="submit"]:hover { box-shadow: 0 2px 5px 2px rgba(92, 228, 252, 0.8); }

 <form action="#"> <input for="fname" id="name" placeholder="First Name" type="text"> <input for="lname" id="name" placeholder="Last Name" type="text"> <input onclick="valid_Function()" type="submit" value="Submit"> </form> <p id="valid"></p>

Answer 1

No matter how many characters I enter, it only gives the if statement and not the else

Yes because isNaN will always return true if you give it a non number string and that's what is happening with you, if you try and input a number between 1 and 9 then your else will be executed.

Your validation works with number type inputs but since you want to validate a text input(name) then it can be done like this

your if statement

if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
}

should be

if(x === "" || x.length > 10) {
    text = "Input not valid";
}

because you need to check if the input is empty and if it is larger than 10 chars, besides I noticed you have two inputs with the same id,, the id is something unique it's not like classes, so pls change your HTML code

Answer 2

Why not a simple truthy check?

if (!x) {
        text = "Input not valid";
    }
    else {
        text = "Input OK";
    }

And, if you just want to make sure the length remains less than 10, then

 if (!x || x.length> 10) {
        text = "Input not valid";
    }
    else {
        text = "Input OK";
    }

Answer 3

The couple issues noted in the comments are causing your code to break.

1. IDs in HTML need to be unique , so having 2 elements with id="name" will cause problems in JavaScript
2. Assuming you meant to check the length of first/last names rather than comparing the values to the integers 1 and 10 , the code should be checking the .length property in your conditionals.

Assuming you want to run this check separately for each name input, here is the adjusted code to validate first and last name separately. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event for more information about handling form submission events.

 document.getElementById('form').addEventListener('submit', function(event) { event.preventDefault(); // this prevents the form from submitting right away so the rest of the validation can run var firstName = document.getElementById("first_name").value.trim(); var lastName = document.getElementById("last_name").value.trim(); var text; if (firstName.length < 1 || firstName.length > 10) { text = "First name is not valid"; } else if (lastName.length < 1 || lastName.length > 10) { text = "Last name is not valid"; } else { text = "Input OK"; } document.getElementById("valid").innerHTML = text; return false; // this stops the form from continuing to submit, you may or may not want this line here });

 form input { display: block; margin-top: 10px; } form [type="submit"] { padding: 5px; border-radius: 5px; border: none; background: skyblue; transition: .5s ease; } form [type="submit"]:hover { box-shadow: 0 2px 5px 2px rgba(92, 228, 252, 0.8); }

 <form id="form"> <input for="fname" id="first_name" placeholder="First Name" type="text"> <input for="lname" id="last_name" placeholder="Last Name" type="text"> <input type="submit" value="Submit"> </form> <p id="valid"></p>