Material theme input fields are broken with custom format validation

General information

• json-editor version: 1.4.0-beta.0
• materialize/1.0.0/css/materialize.min.css
• materialize/1.0.0/js/materialize.min.js

Expected behavior

Input fields (string) are rendered as without format or built-in validation (e.g. minLength)

Actual behavior

Input fields are broken, Select generated from enums seems ok

Steps to reproduce the behavior

Attach custom validator with JS and use Material theme

Direct LINK

{
  "type": "object",
  "title": "Car",
  "properties": {
    "make": {
      "type": "string",
      "enum": [
        "Toyota",
        "BMW"
      ],
      "format": "connectionString"
    },
    "model_custom": {
      "type": "string",
      "format": "connectionString"
    },
    "model": {
      "type": "string",
      "minLength": 1
    }
  }
}

JSONEditor.defaults.custom_validators.push(function (schema, value, path) {
  var errors = [];
  if (schema.format === "connectionString") {
    if (!/^([^=;]+=[^=;]+)(;[^=;]+=[^=]+)*$/.test(value)) {
      errors.push({
        path: path,
        property: 'format',
        message: 'Connection string must be in the format "Server={value};Database={value};Trusted_Connection=yes;"'
      });
    }
  }
  return errors;
});

var editor = new JSONEditor(element, {
  [...]
  "theme": "materialize",
  [...]
}

[pmk65]

@lukzas Did the update I committed, solve your problem?

[pmk65]

I think I have spotted the problem. In src/editors.string.js, the type is defined like this:

    // Specific format
    if(this.format) {
      // Text Area
      if(this.format === 'textarea') {
        this.input_type = 'textarea';
        this.input = this.theme.getTextareaInput();
      }
      // Range Input
      else if(this.format === 'range') {
        this.input_type = 'range';
        var min = this.schema.minimum || 0;
        var max = this.schema.maximum || Math.max(100,min+1);
        var step = 1;
        if(this.schema.multipleOf) {
          if(min%this.schema.multipleOf) min = Math.ceil(min/this.schema.multipleOf)*this.schema.multipleOf;
          if(max%this.schema.multipleOf) max = Math.floor(max/this.schema.multipleOf)*this.schema.multipleOf;
          step = this.schema.multipleOf;
        }

        this.input = this.theme.getRangeInput(min,max,step);
      }
      // HTML5 Input type
      else {
        this.input_type = this.format;
        this.input = this.theme.getFormInputField(this.input_type);
      }
    }
    // Normal text input
    else {
      this.input_type = 'text';
      this.input = this.theme.getFormInputField(this.input_type);
    }

And the “HTML5 Input type” sets the type to the format. There should probably be a check for valid HTML5 input types here and a fallback to “text” type. I have committed an updated src/editors/string.js to the 2.x branch. Now it checks for valid HTML5 input types and fallback to text type