[QUESTION] how to prevent submission of empty value field

[PydPiper]

JSON Schema is allowing the submission of POST request even though the form value is empty. Here is what i tried:

{
"type": "object",
"properties": {"field1": {
  "type": "string",
  "pattern": "[A-Za-z]+",
},
"required": ["field1"]
}

live demo link: LINK

The patter requires at least 1 character to be entered (when you click in the field then off of it the error message does come up stating that pattern is not matched), however the form is allowed to be submitted even though it has an error in it through POST.

I also tried to intercept the button with

          console.log(editor.length)
          if (editor.length == 0) {
               form.submit()
          } else {
               alert("Invalid Form, please double check inputs and resubmit")
          }

Any suggestions as to how to prevent the submission of empty values since regex does not seem to work.

but it still shows me that there are 0 errors

[germanbisurgi]

The editor just tells you that there are validation problems. It's up to you to allow or not the form submition. Also Backend validation should be a must.

[PydPiper]

Does anyone else have any suggestions? I guess i don’t see the point if required field then if the form doesnt even pickup that a field was submitted empty. I can do backend checks but i thought i was missing some nice capability in json schemas here

[neoq]

Hi :) It's a problem for me as well.

It's up to you to allow or not the form submition.

I think preventing submission of invalid forms should be in scope for this project. It is more user-friendly to disallow accidentally sending invalid forms.

json-editor appears to generate input tags with pattern attributes, so preventing submission of invalid forms could be achieved by adding the required attribute to the input elements. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

@PydPiper, this could be done using JavaScript as a workaround.

[schmunk42]

How could the editor prevent a form submit? It has nothing to do with a form, actually you even have to add the hidden text area with the JSON manually.

As @germanbisurgi mentioned you can only check for validation error yourself.

[germanbisurgi]

JSONEditor is use to edit json and it can be used in mutliple scenarios other than form submission. That is why it does not generate submit buttons. The submission part is handled by the developer. For example:

yourForm.on('submit', (event) => {
  event.preventDefault()

  if (editor.getErrors().length === 0) {
      this.submit()
  } else {
      alert("Invalid Form, please double check inputs and resubmit")
  }
})

[neoq]

I understand, but using the HTML required attribute results in nicer UX than using alert. When inputs have a pattern and are required, and you try to submit the form, the browser scrolls to the first offending element and tells you "Please fill out this field." or "Please match the requested format." This still results in a click-event but prevents form submission automatically.

This is from Firefox:

It would be great if json-editor could generate input elements with the required attribute if they have a constraint, but I guess that is a slightly different issue. Maybe I get around to submitting a PR of what I mean :)

[germanbisurgi]

The alert was just an example. It could be done in multiple ways. Add this to your required property if you want to leverage the browser behaviour too:

"options": {
  "inputAttributes": {
    "required": ""
  }
}