add event handler to a textbox apostrophecms

Question

I'm new at the apostrophe world, I'm trying to add a event to a textbox, for example, when they type a country name I would like to check the database to see if this country already exists, I do this process with a widget that I create to add countries and specific offices for each location, so I would like to have more control when user's type type the information, like for example make phone fields accept only numbers instead of letters, etc. I hope I made myself clear lol Thank you so much for the help

Answer 1

I did manage to create a new field, I called isUnique:

    self.addFieldType({
  name: 'isUnique',
  converters: {
    string: function(req, data, name, object, field, callback) {
     
      object[name] = self.apos.launder.string(data[name]);

      /* Checking the object _edit. Mode */
      switch(object._edit){

        case true:

          

          /* Checking if the Name of the Country Name has Changed */
          if( object[field.options[0].fieldToCompareMode].toLowerCase().trim() !== data[field.options[0].fieldToCheck].toLowerCase().trim() ){
           
          return callback('required');
      //       /* Checking if the Content Already exists.  */
      //       (async () => {
      //         await self.apos.docs.db.findOne({
      //           title: data[field.options[0].fieldToCheck] 
      //         })
      //         .then((response, reject) => {
      //           console.log('Data ' + response);
      //           if(response === null){
      //             console.log('achou o erro')
      //             /* The Content Already exists, throwing an error*/
                 
      //             return setImmediate(callback(null));
      //           }
      //         })
      //         .catch(callback)
      //       })();

            
          };

          
      //     console.log('Edit Mode........');
      //   break;

      //   case undefined:
      //     console.log('Undefined .............');
      //     break;
      }

      return setImmediate(callback);
    },

    form: 'string'
  },
  exporters: {
    string: function(req, object, field, name, output, callback) {
      // no formatting, set the field
      output[name] = object[name];
      return setImmediate(callback);
    }
  },

  index: function(value, field, texts) {
    var silent = (field.silent === undefined) ? true : field.silent;
    texts.push({ weight: field.weight || 15, text: value, silent: silent });
  },
  isEmpty: function(field, value) {
    return !value.length;
  },

  addFilter: function(field, cursor) {
    cursor.addFilter(field.name, {
      finalize: function() {
        if (self.cursorFilterInterested(cursor, field.name)) {
          var criteria = {};
          criteria[field.name] = new RegExp(self.apos.utils.regExpQuote(cursor.get(field.name)), 'i');
          cursor.and(criteria);
        }
      },
      safeFor: 'manage',
      launder: function(s) {
        return self.apos.launder.string(s);
      },
      choices: function(callback) {
        return self.sortedDistinct(field.name, cursor, callback);
      },
    });
  },

  // validate: function(field, options, warn, fail, schema) {
  //   if (!field.choices) {
  //     // optional for booleans
  //     return;
  //   }
  //   if (!Array.isArray(field.choices)) {
  //     warn('If present, field.choices must be an array');
  //     return;
  //   }
  //   _.each(field.choices, function(choice) {
  //     _.each(choice.showFields || [], function(name) {
  //       if (!_.find(schema, { name: name })) {
  //         warn('showFields includes ' + name + ', a field that does not exist in the schema');
  //       }
  //     });
  //   });
  // }
});

When I trying to call the async I can't manage to create a callback, for example This field Already exists.

Answer 2

I'm part of the ApostropheCMS team.

ApostropheCMS does not currently support custom front-end and back-end validation of its standard string and textarea fields. However it does support custom schema field types. This is a well-documented path to creating your own field types with exactly the behavior you want. So I would recommend that approach. The documentation I've linked to here provides a complete example.