javascript - 如何验证使用表单生成器创建的表单的 html 作为 cakephp 中的 json 表单？

Question

我已经使用表单构建器插件来动态创建表单并将它们分配给用户以填充数据。表单以 json 格式保存在 db 中，带有 html 属性和值等。我想向该表单添加验证，以便在用户提交时表单，必填字段不应提交为空，它应该给出错误。

以 json 格式保存在 db 中的表单生成器表单。从 db 中获取相同的 json html 代码并作为要填写的表单显示给用户。一旦用户填写表单并提交，就会进行 js 调用以将表单保存在具有值的相同 json 数据中。

[{"type":"header","subtype":"h1","label":"test","dependent":"0"},{"type":"text","required":true,"label":"name","className":"form-control","name":"text-1569560366315","subtype":"text","dependent":"0","userData":["Amelia Gutierrez"]},{"type":"text","required":true,"label":"email","className":"form-control","name":"text-1569560374018","subtype":"text","dependent":"0","userData":["[e-mail]"]},{"type":"textarea","required":true,"label":"Userid","className":"form-control","name":"textarea-1569560381474","subtype":"textarea","dependent":"0","userData":["Eius et hic dolore i"]},{"type":"textarea","label":"contact","className":"form-control","name":"textarea-1569560381898","subtype":"textarea","dependent":"0","userData":["Sit excepteur dolore"]},{"type":"button","label":"Submit","subtype":"button","className":"btn-default btn","name":"button-1569560399786","style":"default"}]

表格显示代码

<div class="formFields form large-9 medium-8 columns content">

    <?= $this->Form->create(null,['id' => 'form-submissions', "enctype" => "multipart/form-data", 'action' => '']) ?>
    <fieldset>
        <legend><?= __($formField[0]['title']) ?></legend>            

          <?= $this->Form->hidden('form_id',['custom'=>'tableData', 'value' => $formField[0]['id'] ]); ?>  
    </fieldset>     
        <div id="build-wrap"></div>
        <div class="render-wrap"></div>
        <?= $this->Form->hidden('field_data',['id'=>'tableData', 'value' => $formField[0]['form_field']['field_data'] ]); ?>
        <?= $this->Form->hidden('form_submission_data',['id'=>'submitted_data', 'value' => '' ]); ?>

        <?= $this->Form->end() ?>
</div>

通过js提交表单

if ($("#form-submissions").length > 0){  

        var fbTemplate = document.getElementById('build-wrap');
        var dataTable = document.getElementById("tableData");
        var formData = dataTable.value;    
        var formRenderInstance = $('#build-wrap').formRender({
            dataType: 'json',
            formData: formData
        });


    $( "#form-submissions button:last" ).click(function() {
        $("#submitted_data").val(JSON.stringify(formRenderInstance.userData));
        var $form = document.getElementById("form-submissions");
            $form = new FormData($form); 
        $.ajax({
                url: "/portal/form-submission-datas/add",
                data: $form,
                cache: false,
                processData: false,
                contentType: false,
                type: "POST",
                success: function(data) {
                    if (data.includes("success")) {
                        let htmlData =
                            '<section class="content-header"> <div class = "alert alert-success alert-dismissible"> <button aria-hidden = "true" data-dismiss = "alert" class = "close" type = "button"> × </button> <h4> <i class= "icon fa fa-check"> </i> Alert! </h4>The form has been saved. </div> </section> ';
                        $("#results").html(htmlData);
                    } else {
                        let htmlData =
                            '<section class="content-header"> <div class = "alert alert-error alert-dismissible"> <button aria-hidden = "true" data-dismiss = "alert" class = "close" type = "button"> × </button> <h4> <i class= "icon fa fa-check"> </i> Alert! </h4>The form could no be saved. </div> </section> ';
                        $("#results").html(htmlData);
                    }
                }
            });

    }); 
    $("form").submit(function(e){
        e.preventDefault();
     });   

}

应该能够对这个动态表单应用 html 验证。任何帮助将不胜感激。

标签： javascriptajaxcakephpformbuilder