Question

我正在使用JsonForm库（https://github.com/jsonform/jsonform）用html描述表单，并且已经定义了JsonForm结构的架构和表单，但是启用发送按钮的“ onSubmit”功能不起作用。该按钮不出现。

我在javascript中的代码如下（data.js）：

$('#myForm').jsonForm({
    schema: {
        Min: {
            type: 'integer',
            title: 'Minimo(%):',
            minimum: 0,
            maximum: 100,

        },
        Max: {
            type: 'number',
            title: 'Máximo (%):',
            minimum: 0,
            maximum: 100,
        }
    },
    form: [
           {
               key:'Min',
               type:'number',
               htmlClass: 'col-md-2'
           }

           ],
           onSubmit: function (errors, values){
               if (errors) {
                   alert(errors);
               }
               else {
                   document.getElementById("selectedComponents").innerHTML = "it works";
               }
           }
});

我的html定义如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>web</title>
<link rel="stylesheet" style="text/css" href="css/bootstrapCss/bootstrap.css" />
<link rel="stylesheet" style="text/css" href="css/newCss.css" />
</head>
<body onLoad="createInitOptions()">


        <br>
        <div class="row">

            <div class="col-md-3 text-center" id="selectedComponents">


        </div>
        <div class="row">

            <div class="col-md-5 text-center">
            </div>

            <div class="col-md-4"  id="component">

                <div class="form-group">

                <form id="myForm"></form>

                <div id="res" class="alert">
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/jsv.js"></script>
    <script type="text/javascript" src="js/jsonform.js"></script>
    <script type="text/javascript" src="js/data.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</body>
</html>

可能是什么原因？

Answer 1

您需要在“表单”部分中为“ submit”或“ *”放置一个定义，并将“ onSubmit”移到根之外。

{
  "schema": {
    "email": {
      "type": "string",
      "title": "Email",
      "required": true,
      "maxLength": 128
    },
    "password": {
      "type": "string",
      "title": "Password",
      "required": true,
      "maxLength": 128
    },
    "remember": {
      "type": "boolean",
      "default": true
    }
  },
  "form": [
    {
      "key": "email",
      "type": "email"
    },
    {
      "key": "password",
      "type": "password"
    },
    {
      "key": "remember",
      "inlinetitle": " Remember me",
      "notitle": true
    },
    {
      "type": "submit",
      "title": "Login"
    }
  ],

  "onSubmit": (errors, values) => {
    console.info(errors, values);
  }
}

我将其用于广告素材，将表单设置存储在json文件中（不带“ onSubmit”），然后通过javascript添加onSubmit。

                var schema = await $.get("/parts/model.login.json");

                schema.onSubmit = (errors, values) => {
                    LoginResults = values;
                    LoginNext = true;
                };

未显示提交按钮[JsonForm库]

1 个答案: