Masked Fields **** on entry

Forms
1

Is there a way to have a field show **** after data is entered? Example a field that may contain sensitive data, we want it to mask with a character.

2

Hello @cortese98,

You can add any input to the form using HTML control, e.g.:

<div>
    <label for="pass">Password (8 characters minimum):</label>
    <input type="password" id="pass" name="password"
           minlength="8" required>
</div>

And get the value of the input and store it in a common field using the code:

fd.field('Password').value = $( "#pass" ).val()

We can also add this functionality directly to the designer, but this will be paid support. If you are interested, please contact us by email support@plumsail.com

3

Hi @mnikitina, actually I'm having the same problem and trying to replicate your solution is not working for me, although it seems quite simple.

I'm on the Trial period of Plumsail, so if I manage to solve this issue, then this will be a great reason to buy a subscription.

More information:

I added an HTML control with a masked field named "password" with ID "pass1" and a Common Field named "Password" with UpperCase on "P", as follows:

screen1

The properties of the Common Field "Password" are these:

screen2

The JS code, is this:

screen3

What is happening is that the form loads the masked field and the common field, but when I save changes after typing any value on the masked field "password", the value is not being saved, although the code lives within the New and Edit form types.

Hope you can help! Best!!!

4

Hello @alekzmarin,

Welcome to Plumsail Community!

The code you want to execute on the form must be placed inside the spRendered function:

fd.spRendered(function(vue) {
    fd.field('Password').value = $( "#pass" ).val()
});
5

Thanks for your support!. Indeed what I was missing, was the usage of the propper function.

Best!

1 Like
6

I have a use for this type of input. How do I style the input field and label to match those already on the form.

7

@cwalter2,

You can add CSS classes to the label and input:

<div>
    <label for="pass" class="d-flex fd-field-title col-form-label col-sm-auto">Password (8 characters minimum):</label>
    <input type="password" id="pass" name="password"
           minlength="8" required class="form-control">
</div>

And you can always add a styling with CSS.

1 Like