onChange client script to require 16 characters in a variable field

DTrishman · ‎09-28-2023

Good morning,

I have a requirement to require exactly 16 characters on a catalog item field to help ensure end users submit a full debit or credit card number with fewer errors. I'm not sure if I need to target a table and field name in addition to identifying the field names in the code.

I would also like this to work on three additional fields named "card_number_2", "card_number_3", and "card_number_4".

Any help fixing this code would be much appreciated!

function onChange(control, oldValue, newValue, isLoading, isTemplate) {


    if (isLoading || newValue === '') {
		
		return;

    }

  //Type appropriate comment here, and begin script below


  //Require at least 10 characters in the 'Comments' field


  var maxLength = 16;


  var control = g_form.getControl('card_number');


  if(control.value.length < maxLength){


  g_form.hideErrorBox('card_number');


  g_form.showErrorBox('card_number', 'You must type exactly ' + maxLength + ' characters in this field. You have entered characters less than ' + maxLength);


  return false;


  }


  else if(control.value.length > maxLength){


  g_form.hideErrorBox('card_number');


  g_form.showErrorBox('card_number', 'You must type exactly ' + maxLength + ' characters in this field. You have entered characters more than ' + maxLength);


  return false;


  }


  else{


  g_form.hideErrorBox('card_number');


  }

		
}

Danish Bhairag2 · ‎09-28-2023

Hi @DTrishman ,

Please use the below code to validate if user has entered 16 digits or not. You can create same onChange client script for other fields(card_number2,card_number3,card_number4).

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    //Type appropriate comment here, and begin script below
    alert(newValue.length);//later comment the alert;
    if (newValue.length == 16) {
        //Dont do anything
    } else {
        g_form.showFieldMsg('card_number', 'Total 16 digits should be entered.Kindly Re-Enter', 'error');//update the message as desired 
    }

}

Please mark my answer helpful & accepted if it helps you resolve your query.

Thanks,

Danish

View solution in original post

Community Alums · ‎09-28-2023

Hi @DTrishman

Please try the below code.

function onLoad() {
    if (isLoading || newValue === '') {
        return;
    }

    var fieldNames = ['card_number', 'card_number_2', 'card_number_3', 'card_number_4'];

    for (var i = 0; i < fieldNames.length; i++) {
        var fieldName = fieldNames[i];
        var control = g_form.getControl(fieldName);
        var maxLength = 16;

        if (control.value.length !== maxLength) {
            g_form.hideErrorBox(fieldName);
            g_form.showErrorBox(fieldName, 'You must type exactly ' + maxLength + ' characters in this field.');
            return false;
        } else {
            g_form.hideErrorBox(fieldName);
        }
    }
 return true;
}

DTrishman · ‎09-28-2023

I inserted that code, but nothing seems to be happening on the catalog item form.

RAMANA MURTHY G · ‎09-28-2023

Hello @DTrishman ,

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   if (isLoading || newValue === '') {
      return;
   }
	var cardRegEx = /^\d{16}$/;
	var cardNum = g_form.getValue('u_debit_credit_card_number')
	if(!cardRegEx.test(cardNum)){
		g_form.setValue(control.name,'');
		g_form.showFieldMsg('u_debit_credit_card_number','Enter valid 16 digits Debit/Credit card number','error');
	}
}

try with this RegExp

Please mark my answer helpful  & correct ✅ if it helps you
Thank you

G Ramana Murthy
ServiceNow Developer

AnveshKumar M · ‎09-28-2023

Hi @DTrishman

You need to create an onChange client script for the fields you need to validate with the following code and similarly you need to create an onSubmit client script to prevent the for being submitted if the validation fails:

onChange Catalog Client Script for each Card Number Field:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {

    if (isLoading || newValue === '') {
        return;
    }

    var maxLength = 16;

    if (newValue.length < maxLength) {
        g_form.hideErrorBox('card_number');
        g_form.showErrorBox('card_number', 'You must type exactly ' + maxLength + ' characters in this field. You have entered characters less than ' + maxLength);
    } else if (newValue.length > maxLength) {
        g_form.hideErrorBox('card_number');
        g_form.showErrorBox('card_number', 'You must type exactly ' + maxLength + ' characters in this field. You have entered characters more than ' + maxLength);
    } else {
        g_form.hideErrorBox('card_number');
    }
}

onSubmit Catalog Client Script :

function onLoad() {

    var maxLength = 16;
    var card_fields = ['card_number', 'card_number_2', 'card_number_3', 'card_number_4'];
    for (key in card_fields) {
        var field_name = card_fields[key];
        var card_num = g_form.getValue(field_name);
        if (card_num.length < maxLength) {
            g_form.hideErrorBox(field_name);
            g_form.showErrorBox(field_name, 'You must type exactly ' + maxLength + ' characters in this field. You have entered characters less than ' + maxLength);
            return false;
        } else if (card_num.length > maxLength) {
            g_form.hideErrorBox(field_name);
            g_form.showErrorBox(field_name, 'You must type exactly ' + maxLength + ' characters in this field. You have entered characters more than ' + maxLength);
            return false;
        } else {
            g_form.hideErrorBox(field_name);
        }
    }

    return true;
}

Please mark my answer helpful and accept as solution if it helped you 👍✔️

Thanks,
Anvesh