How to perform string methods on function parameter in javascript

Question

I am trying to write some javascript code to validate an HTML form and I am stuck. I am suspecting there are multiple issues (I am really new to JS) but the one I am stuck at is preventing me from further troubleshooting. Essentially, I need to have 2 functions, validatePassword and validateForm, one to validate the password and another to validate the rest of the input. The password needs to have an uppercase letter and be at least 8 characters long.

My main problem right now is that I do not know how to convert validatePassword's parameter to a string to check its length and whether it has an uppercase letter or not.

(Please let me know if you see any other problems with my code.)

Here it is:

// add validatePassword function here
function validatePassword(str) {
    let value = String(str);
    if (value.length < 8 && value !== value.toLowerCase()) {
        return true;
    }
    return false;
}

const validateForm = (myForm) => {
    // get text of fields
    var firstname = myForm.firstname.value;
    var lastname = myForm.lastname.value;
    var password = myForm.password.value;

    firstname != null
        ? true
        : $("#message").html("Please enter a first name");

    lastname != null
        ? true
        : $("#message").html("Please enter a last name");

    /* Form validation*/

    validatePassword(password) == true
        ? true
        : $("#message").html("Password incorrect");

    return false; // prevent page reload
};

<head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>

<body>

    <form id="form1" action="#" onsubmit="return validateForm(this);">
        first name: <input type="text" name="firstname" /><br />
        last name: <input type="text" name="lastname" /><br />
        password: <input type="text" name="password" /><br />

        <button>Check</button>
    </form>

    <hr />
    <div id="message"></div>

</body>

Is your password contains only alpha characters ?

RASFI
– RASFI

2023-01-29 20:02:29 +00:00
Commented Jan 29, 2023 at 20:02 — RASFI
– RASFI, Commented Jan 29, 2023 at 20:02

Fractalism · Accepted Answer · 2023-01-29 20:36:27Z

A few problems here:

There was a logic error in validatePassword (and some typos). You want the password to be invalid if the length is < 8 or the value is equal to its lowercase. Personally I would return true is the password was valid, but to each their own.
It is more conventional to use if statements instead of the ternary operator if you don't need its return value.
You need to reset the error message string if nothing is wrong in the form (this can be done before checking any of the fields).

// add validatePassword function here
function validatePassword(str) {
    let value = String(str);
    if (value.length < 8 || value === value.toLowerCase()) {
        return true;  // invalid password
    }
    return false;  // valid password
}

const validateForm = (myForm) => {
    // get text of fields
    var firstname = myForm.firstname.value;
    var lastname = myForm.lastname.value;
    var password = myForm.password.value;

    $("#message").html("");

    if (!firstname) {
        $("#message").html("Please enter a first name");
    }

    if (!lastname) {
        $("#message").html("Please enter a last name");
    }

    /* Form validation*/
    
    if (validatePassword(password) === true) {
        $("#message").html("Password incorrect");
    }

    return false; // prevent page reload
};

<head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>

<body>

    <form id="form1" action="#" onsubmit="return validateForm(this);">
        first name: <input type="text" name="firstname" /><br />
        last name: <input type="text" name="lastname" /><br />
        password: <input type="text" name="password" /><br />

        <button>Check</button>
    </form>

    <hr />
    <div id="message"></div>

</body>

Rohìt Jíndal · Accepted Answer · 2023-01-30 08:48:23Z

1

Few observations/suggestions :

As password is always consider as a sensitive field, It should be a type of password instead of text. (No need to worry about the data type while getting it, You will get it as a string only)
As per the mentioned validation criteria for password The password needs to have an uppercase letter and be at least 8 characters long. Condition should be :

value.length <= 8 && value !== value.tolowerCase()
myForm.password.value will return a string only. Hence, No need to convert String into a String again.

Your final password validation function would be :

function validatePassword(value) {
    return (value.length <= 8 && value !== value.tolowerCase()) ? true : false;
}

answered Jan 30, 2023 at 8:48

Rohìt Jíndal

27.3k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

How to perform string methods on function parameter in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related