Как проверить HTML для формы, созданной с помощью конструктора форм, как JSON формы в CakePHP? - PullRequest
Новая
       22

Как проверить HTML для формы, созданной с помощью конструктора форм, как JSON формы в CakePHP?

2 голосов
/ 27 сентября 2019

Я использовал плагин построителя форм для динамического создания форм и назначения их пользователям для заполнения данных. Форма сохраняется в БД в формате json с атрибутами и значениями html и т. Д. Я хочу добавить проверки в эту форму, чтобы припользователь отправляет форму, обязательные поля не должны отправляться пустыми, и это должно выдавать ошибку.

Форма построителя форм, которая сохраняется в формате json в db.Тот же HTML-код json извлекается из базы данных и отображается пользователю как форма для заполнения. Как только пользователь заполняет форму и отправляет ее, выполняется вызов 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":["cuziqutisy@mailinator.net"]},{"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 к этой динамической форме. Любая помощь будетоценили.

...