javascript - 表单验证和所有后续代码不执行

Question

我有一个更新表单，我在我的主页上的一个模式中调用它，(通过一个 onclick 事件，点击触发一个带有 xmlhttprequest 的调用，用于包含带有存储数据值的表单的编辑页面)。问题是，一切正常，更新工作，发布工作，首先检索数据工作，除了表单验证和 ajax 用于发布数据。请注意，在我的主页上，我有一个创建调用，它创建了一个新实例，它工作得很好，带有表单验证和 ajax post，所以它不能是一些必需的 jQuery 或任何其他脚本。

这是我的表格:

<form id="eventFormUpdate" method="POST" class="form-horizontal" action="Event/{{$event->id}}/Update">
    <input type="hidden" name="_method" value="PATCH" id="hidden-update">
    <div class="form-group">
        <label class="col-xs-3 control-label">Nom</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="nameUpdate" value="{{$event->name}}"/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Date de début</label>
        <div class="col-xs-5 dateContainer">
            <div class="input-group input-append date" id="startDatePickerUpdate">
                <input type="text" class="form-control" name="starting_dateUpdate" value="{{$event->starting_date}}"/>
                <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Date de fin</label>
        <div class="col-xs-5 dateContainer">
            <div class="input-group input-append date" id="endDatePickerUpdate">
                <input type="text" class="form-control" name="ending_dateUpdate" value="{{$event->ending_date}}"/>
                <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Assigné à</label>
        <div class="col-xs-5 selectContainer">
            <select name="assigned_toUpdate" class="form-control">
                <option value="4" selected >First</option> <!--fix this by checking if is the selected data or not-->
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Description</label>
        <div class="col-xs-5">
            <textarea id="descUpdate" class="form-control" name="descriptionUpdate" placeholder="Veuillez entrer une description">{{$event->description}}</textarea>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-default" id="update-event-submit">valider</button>
        </div>
    </div>
</form>

这是我处理表单验证和 ajax 发布的脚本

<!-- event update script -->
<script>
$(document).ready(function() {
    $('#startDatePickerUpdate')
            .datepicker({
                format: 'yyyy/mm/dd'
            })
            .on('changeDate', function(e) {
                // Revalidate the start date field
                $('#eventFormUpdate').formValidation('revalidateField', 'starting_dateUpdate');
            });

    $('#endDatePickerUpdate')
            .datepicker({
                format: 'yyyy/mm/dd'
            })
            .on('changeDate', function(e) {
                $('#eventFormUpdate').formValidation('revalidateField', 'ending_dateUpdate');
            })
            .find('[name="assigned_toUpdate"]')
            .selectpicker()
            .change(function(e) {
                /* Revalidate the pick when it is changed */
                $('#eventFormUpdate').formValidation('revalidateField', 'assigned_toUpdate');
            })
            .end();

    $('#eventFormUpdate')
            .formValidation({
                framework: 'bootstrap',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    nameUpdate: {
                        validators: {
                            notEmpty: {
                                message: 'Le nom est obligatoire.'
                            }
                        }
                    },
                    starting_dateUpdate: {
                        validators: {
                            notEmpty: {
                                message: 'La date de début est obligatoire.'
                            },
                            date: {
                                format: 'YYYY/MM/DD',
                                min: new Date(new Date().setDate(new Date().getDate()-1)),
                                max: 'ending_date',
                                message: 'La date de début est non valide.'
                            }
                        }
                    },
                    ending_dateUpdate: {
                        validators: {
                            notEmpty: {
                                message: 'La date est oligatoire.'
                            },
                            date: {
                                format: 'YYYY/MM/DD',
                                min: 'starting_date',
                                message: 'La date de fin est non valide.'
                            }
                        }
                    },
                    descriptionUpdate: {
                        validators: {
                            notEmpty: {
                                message: 'La description est obligatoire.'
                            }
                        }
                    },
                    assigned_toUpdate: {
                        validators: {
                            notEmpty: {
                                message: 'Veuillez séléctionner un utilisateur.'
                            }
                        }
                    }
                }
            })
            .on('success.field.fv', function(e, data) {
                if (data.field === 'starting_dateUpdate' && !data.fv.isValidField('ending_dateUpdate')) {
                    // We need to revalidate the end date
                    data.fv.revalidateField('ending_dateUpdate');
                }

                if (data.field === 'ending_dateUpdate' && !data.fv.isValidField('starting_dateUpdate')) {
                    // We need to revalidate the start date
                    data.fv.revalidateField('starting_dateUpdate');
                }
            })

            .submit(function(){
                return false;
            })

            .submit(function(){
                console.log('gonnastartsub');
                var $form = $("#eventFormUpdate"),
                        url = $form.attr('action');
                console.log('got vars');
                $.post(url, $form.serialize()).done(function () {
                    console.log('am in');
                    $("#modal-closeUpdate").click();
                    console.log('posted');
                });
            });
});
$("#descUpdate")
        .focus(function() {
            if (this.value === this.defaultValue) {
                this.value = '';
            }
        })
        .blur(function() {
            if (this.value === '') {
                this.value = this.defaultValue;
            }
        });

更新

这是我的 Controller

public function update(Request $request,$id)
{
    $event = event::find($id);

    $event->name = $request->name;
    $event->description = $request->description;
    $event->starting_date = $request->starting_date;
    $event->ending_date = $request->ending_date;
    $event->assigned_to = $request->assigned_to;
    $event->save();

}

我的路线调用:

    Route::patch('Event/{eventID}/Update', 'EventsController@update');

最后一件事，起初脚本在我的主页上，但它不起作用，所以我试图用 xmlhttprequest 将它放入被调用的页面中，但仍然不起作用。我唯一能想到的是，当我调用新页面(编辑和更新数据的表单)时，脚本已经加载到主页中，所以它找不到要处理的元素的 id，这就是为什么它不起作用，或者至少这是我能找到的唯一原因。有什么建议吗？

Answer 1

首先你的日期选择器的最小值和最大值有错误，它们与你设置的字段名称不匹配，将它们设置为这个

 max: 'ending_dateUpdate'
 min: 'starting_dateUpdate'

其次，您的表单中的字段名称与您的 Controller 页面上的字段名称不匹配，因此如果找不到数据则无法真正更新，这应该是您的 Controller 页面:

public function update(Request $request,$id)
{
    $event = event::find($id);

    $event->name = $request->nameUpdate;
    $event->description = $request->descriptionUpdate;
    $event->starting_date = $request->starting_dateUpdate;
    $event->ending_date = $request->ending_dateUpdate;
    $event->assigned_to = $request->assigned_toUpdate;
    $event->save();

}

希望对您有所帮助。