Field Masking and Validation

Frappe Framework Customization
, ,
1

Hi Team,

I have a field called bank_ac_no where bank account number is filled and another field called confirm_bank_account where we need to revalidate the account number. Now i need a code where bank_ac_no should be masked while typing and confirm_bank_account should be validated with bank_ac_no while saving employee doctype in frappe

Here i have used custom field to store the value temporarily. However i am getting error while validating.

Here is the code which i am using. Kindly help me out in validation.

frappe.ui.form.on(‘Employee’, {
before_save: function(frm) {
// Set the masked value to the custom field
frm.set_value(‘custom_unmasked_bank_ac_no_’, frm.unmaskedValue);

    // Validation for matching account numbers
    if (frm.unmaskedValue && frm.doc.confirm_bank_account &&
        frm.unmaskedValue !== frm.doc.confirm_bank_account) {
        frappe.msgprint(__("Account numbers do not match. Please re-enter."));
        frappe.validated = false;
    }
},

refresh: function(frm) {
    // Get the bank_ac_no field
    var bankAcNoField = frm.fields_dict['bank_ac_no'];
    var confirmBankAcField = frm.fields_dict['confirm_bank_account'];

    // Attach the oninput event to the bank_ac_no field for masking
    if (bankAcNoField) {
        bankAcNoField.$input.on('input', function() {
            // Set the unmasked value to the variable
            frm.unmaskedValue = bankAcNoField.get_value();

            // Mask the complete bank_ac_no as the user types (replace with your masking logic)
            var maskedValue = maskCompleteBankAcNo(frm.unmaskedValue);

            // Set the masked value back to the field
            bankAcNoField.set_value(maskedValue);
        });
    }

    // Attach the oninput event to the confirm_bank_account field
    if (confirmBankAcField) {
        confirmBankAcField.$input.on('input', function() {
            // You can add additional logic here if needed
        });
    }
}

});

// Custom function to mask the complete bank_ac_no (replace with your logic)
function maskCompleteBankAcNo(bankAcNo) {
// Implement your masking logic here (e.g., replace with asterisks)
// This example replaces all characters with asterisks
return ‘*’.repeat(bankAcNo.length);
}