使用 JavaScript 创建注册表单时出现错误消息重叠

Question

I have been trying to create the Sign Up form with the error message with respect to conditional validation. Achieved getting the error message on the browser, But the messages are overlapping. The Complete code has been uploaded in the Github. Please Let me know the error. https://github.com/manojsiva/CapStone_Project_Using_JavaScript .

Answer 1

There are several mistakes you made:

All the variables you have initialized at the beginning were set to empty strings "" , because by the time you get the values of the input fields which is when the browser parses your JS file, the user hasn't typed anything yet. This is a quite common mistake people make. Instead, you just query the elements, then retrieve the value later when the user submits. Like so:

const username = document.getElementById("username");

//then later retrieve the value:
const usernameValue = username.value.trim();

However this is quite annoying to type this much every time you need to retrieve a value, you can create a function to do that:

function value(element) {
    return element.value.trim();
}

value(username);

Another thing is your checkInput() never returns anything, so it evaluates to underfined all the time, that's why it goes inside your "true" statement every time. So the checkInput() should return a boolean true or false whether the user has filled out all the fields or not.

The setErrorFor(input, message) and setSuccessFor(input) take input as elements as I can tell, but you passed variables into these function. You need to check it again