You are viewing limited content. For full access, please sign in.

Question

Question

Password to view a form

asked on February 22, 2016 Show version history

I'm trying to password protect a form. My idea how to do this is to have an input field where the user enters the password - and if it is correct, use field rules to show the rest of the form. I would like to have the input for the password show up either as dots or asterisks, instead of plain text. How would I go about doing this?

edit: the field I have the password being entered into is #q97 and has a css class of "password".

 

Thanks

0 0

Replies

replied on February 22, 2016

How sensitive is the information on the rest of the form? Because you can't rely on this method for security. JavaScript runs inside the browser, which the user has full control over. It would be trivial for any technically competent user to bypass your password field to access the information on the form.

1 0
replied on February 22, 2016 Show version history

Honestly, it's not super sensitive, and most of the users are not technically competent at all. What would you recommend as a better option though?

0 0
replied on February 22, 2016 Show version history

OK, well, I still don't recommend it for public forms, but for internal forms you can implement it like this as a general usability feature...

First, instead of a single line field for the password, use your own custom input field. This let's you define its type as "password", which makes the browser hide the input as dots or asterisks as the user types it.

Custom HTML Field:

<input type="password" name="password" id="pw" placeholder="Enter password">

Then, hide the fields you want hidden by default, but use CSS to do so. The format is simple:

CSS:

#q34 {
    display: none;
}

Then, use JavaScript to check if the password is correct after the user types it and clicks off the field:

JavaScript:

$(document).ready(function() {
    $("#pw").on("change", function() {
        if ($(this).val() == "laserfiche") {
            $("#q34").show();
        }
    });
});

The above code checks to see if the user has typed in "laserfiche" (case sensitive) and if they have, it shows the hidden field. Instead of a single field, you can have multiple ones, or put everything you want to hide inside a Section element and refer it its id.

Again though, I'll say it for other readers: this is not a secure method! It's just a simple trick you can use to prevent users from shooting themselves in the foot. For example, we use it to allow users to edit read-only fields, but only if they type in the password. This prevents accidental editing of those fields while still giving some level of control in case they really, really need to.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.