NJFTextField

Props

This is the most common input type for NJForm. Can take several different value types such as text, passwords, dates, times etc... You can customize if

interface {
  id: string;
  value?: string;
  type?: NJFTextFieldTypeEnum;
  textFieldProps?: NJFTextFieldProps;
}
PropertyTypeDescription
idstring*The name that your value will be sent to your action.
valuestring?Any default value
typeNJFTextFieldTypeEnum?
textFieldPropsNJFTextFieldProps?

Examples

Simple username field

A field that can not be empty and can not contain '@','#','$','%','^' these characters. The validation error will not be displayed in the field but only in the form (if the form allows it).

<NJFTextField
    id={'username'}
    value={''}
    type={NJFTextFieldTypeEnum.text}
    textFieldProps={{
      icon: svgUser(),
      niceName: 'Username',
      inputWrapperClassName: 'flex gap-3',
      placeHolder: 'Username',
      className: 'py-2 px-2 border',
      inputClassName: 'focus:outline-0 w-full form-input',
      validationRules: {
        allowEmpty: false,
        inputType: NJFInputTypeEnum.string,
        forbiddenCharacters: ['@','#','$','%','^'],
      }
    }}
></NJFTextField>

Password & confirm password

Two fields that must have the same values to pass validation. Must be at least 4 characters in length and can not contain '&'. The validation error(s) will be displayed in the fields and more specifically bellow them.

<NJFTextField
    id="password"
    type={NJFTextFieldTypeEnum.password}
    value={''}
    textFieldProps={{
      icon: svgPassword(),
      validation: {
        displayValidationError: true,
        position: NJFNodePositionEnum.bottom,
        insideInput: false,
        className: 'text-[10px] text-red-500 -mt-2',
      },
      niceName: 'Password',
      inputWrapperClassName: 'flex gap-3',
      placeHolder: 'Password',
      className: 'py-2 px-2 border',
      inputClassName: 'focus:outline-0 w-full form-input',
      validationRules: {
        allowEmpty: false,
        inputType: NJFInputTypeEnum.string,
        minLength: 4,
        forbiddenCharacters: ['&'],
      },
    }}
  />
<NJFTextField
    id="password_confirm"
    type={NJFTextFieldTypeEnum.password}
    value={''}
    textFieldProps={{
      icon: svgPassword(),
      validation: {
        displayValidationError: true,
        position: NJFNodePositionEnum.bottom,
        insideInput: false,
        className: 'text-[10px] text-red-500 -mt-2',
      },
      niceName: 'Confirm Password',
      inputWrapperClassName: 'flex gap-3',
      placeHolder: 'Repeat Password',
      className: 'py-2 px-2 border',
      inputClassName: 'focus:outline-0 w-full form-input',
      validationRules: {
        allowEmpty: false,
        inputType: NJFInputTypeEnum.string,
        minLength: 4,
        matchValueWith: 'password',
      },
    }}
/>

Field with custom realtime validation

Field with custom regular expression that will be validated in realtime.

<NJFTextField
    id={'address'}
    value={''}
    type={NJFTextFieldTypeEnum.text}
    textFieldProps={{
      icon: svgUser(),
      resetValue: '',
      niceName: 'Address',
      inputWrapperClassName: 'flex gap-3',
      placeHolder: 'Your address',
      className: 'py-2 px-2 border',
      inputClassName: 'focus:outline-0 w-full form-input',
      validationRules: {
        allowEmpty: false,
        inputType: NJFInputTypeEnum.string,
        customRegex: `^[A-Za-z0-9\u0391-\u03A9\u03B1-\u03C9\u00C0-\u00FF\u0100-\u017F.,()\\-]+(\\s[A-Za-z0-9\u0391-\u03A9\u03B1-\u03C9\u00C0-\u00FF\u0100-\u017F.,()\\-]+)*$`,
      },
      validation: {
        displayValidationError: true,
        realtimeValidation: true,
        position: NJFNodePositionEnum.bottom,
        insideInput: false,
        className: 'text-[10px] text-red-500 -mt-2',
      },
      autofill: false,
    }}
></NJFTextField>

Realtime validation gif

Remember:

Note: You can set property validation.preventiveValidation to true and add property validationRules.realtimeCustomRegex to execute a second regex that instead of generating a validation error it will simply prevent these characters from being typed.

Number between two values

A number field that needs to be greater or equal than 4 and less than 6.

 <NJFTextField
    id={'number'}
    value={''}
    type={NJFTextFieldTypeEnum.number}
    textFieldProps={{
      icon: svgUser(),
      resetValue: '',
      niceName: 'Number',
      inputWrapperClassName: 'flex gap-3',
      placeHolder: 'Number',
      className: 'py-2 px-2 border',
      inputClassName: 'focus:outline-0 w-full form-input',
      validationRules: {
        allowEmpty: false,
        inputType: NJFInputTypeEnum.number,
        numberOperations: [
          { operation: NJFMathOperationEnum.greaterOrEqual, number: 4 },
          { operation: NJFMathOperationEnum.lessThan, number: 6 },
        ],
      },
      validation: {
        displayValidationError: true,
        realtimeValidation: true,
        position: NJFNodePositionEnum.bottom,
        insideInput: false,
        className: 'text-[10px] text-red-500 -mt-2',
      },
      autofill: false,
    }}
></NJFTextField>

You can see it in action bellow.

Multiple validation rules can be used for a single field

Check the errors bellow the fields as they change due to the input.

Multiple demo gif