CODEWITHSUNDEEP
javascripthtmlstringforms
user19334054
user19334054

Reputation: 63

How to perform string methods on function parameter in javascript

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>

Upvotes: 1

Views: 71

Answers (2)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

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;
}

Upvotes: 1

Fractalism
Fractalism

Reputation: 1215

A few problems here:

  1. 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.
  2. It is more conventional to use if statements instead of the ternary operator if you don't need its return value.
  3. 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>

Upvotes: 2

Related Questions