part_os
@part_os
Сложное в простом

Множественный bind кнопки, как поправить?

Всем привет, есть форма которая подгружается ajax в модальное окно:
Общее для всех модальное окно:
!-- Modal -->
<div class="modal fade" id="idmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalTitle"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="myModalBody">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="myModalClose" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary" id="myModalSave">Сохранить</button>
            </div>
        </div>
    </div>
</div>

Сама форма:
<form id="js-form-add-entries"
      method="POST" action="/entries/add"
      enctype="multipart/form-data"
>


    <div class="form-group">
        <label>ФИО</label>
        <input required type="text" name="fio" value="<?php echo @$data['fio']; ?>" class="form-control"
               id="fio">
    </div>

    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" value="<?php echo @$data['email']; ?>" class="form-control"
               id="email">
    </div>

    <div class="form-group">
        <label>Phone</label>
        <input type="text" name="phone" value="<?php echo @$data['phone']; ?>" class="form-control"
               id="phone">
    </div>

    <div class="form-group">
        <label>Photo</label>
        <input type="file" name="photo" value="<?php echo @$data['photo']; ?>" class="form-control"
               id="photo">
    </div>

    <input type="hidden" name="CSRF_TOKEN" value="<?php echo @$data['CSRF_TOKEN']; ?>" >
    <?php
    if (!empty($data['errors'])) { ?>
        <div class="alert alert-danger fade show" role="alert">

            <?php echo array_shift($data['errors']) ?>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    <?php } ?>
</form>


И код который подтягивает форму и запускает валидацию и сохранение:
$(document).ready(function () {
    $(document.body).on('click', '#js-add-entries', function () {

        var $button = $('#js-add-entries');

        $('#myModalTitle').html('Добавить запись');
        $('#idmodal').modal({show: true});

        $('#myModalBody').text('');
        $.getJSON($button.data('action'), function (data) {
            $('#myModalBody').append(data.forms);
        });

        $('#myModalSave').bind('click', function () {

            var $form = $('#js-form-add-entries');

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

                var $form = $(this);
                var $formData = new FormData($form.get(0));

                var isValidFiles = validateFiles({
                    $files: $form.find('#photo'),
                    maxSize: 2 * 1024 * 1024,
                    types: ['image/jpeg', 'image/jpg', 'image/png']
                });

                var isValidEmail = validateEmail($form.find('#email').val());

                if (!isValidEmail) {
                    console.log('client validation email: ', isValidEmail);
                    return false;
                }
                console.log(isValidEmail);

                if (isValidFiles.length) {
                    console.log('client validation errors: ', isValidFiles);
                    return false;
                }

                console.log(isValidFiles);
                $.ajax({
                    type: 'POST',
                    url: $form.attr('action'),
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: $formData,
                    cache: false,
                    success: function (data) {
                        if (data.success != false) {
                            $('#idmodal').modal('hide');
                        } else {
                            $('#myModalBody').text('');
                            $('#myModalBody').append(data.forms);
                        }

                    }
                });
            });

            $form.submit();

        })
    });


});


когда нажимаешь на кнопку Сохранить, в модальном окне на которую навешивается bind('click') если валидация не проходит, после повторного нажатия добавлять вызовы всех проверок, сколько раз нажмёшь, он столько и добавит
это я нажал всего 3 или 4 раза
Как правильно инициализировать?
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
part_os
@part_os Автор вопроса
Сложное в простом
разделил немного код в итоге результат:
$(document).ready(function () {


    initSubnit = function() {

        var $form = $('#js-form-add-entries');
        var $formData = new FormData($form.get(0));

            $.ajax({
                type: 'POST',
                url: $form.attr('action'),
                dataType: 'json',
                contentType: false,
                processData: false,
                data: $formData,
                cache: false,
                success: function (data) {
                    if (data.success != false) {
                        $('#myModalBody').text('');
                        $('#idmodal').modal('hide');
                    } else {
                        $('#myModalBody').text('');
                        $('#myModalBody').append(data.forms);
                    }

                }
            });
    };

    validate = function () {

        var $form = $('#js-form-add-entries');

        $('.form-control').removeClass('is-invalid'); // remove the error class
        $('.invalid-feedback').remove(); // remove the error text

        var isValidFiles = validateFiles({
            $files: $form.find('#photo'),
            maxSize: 2 * 1024 * 1024,
            types: ['image/jpeg', 'image/jpg', 'image/png'],
            required: false
        });
        if (isValidFiles.length) {
            $form.find('#photo').addClass('is-invalid');
            $('#photo-group').append('<div class="invalid-feedback">Не правильный файл</div>');
        }


        var isValidEmail = true;
        var email = $form.find('#email').val();
        if (!isEmpty(email)) {
            isValidEmail = validateEmail(email);
            if (!isValidEmail) {
                $form.find('#email').addClass('is-invalid');
                $('#email-group').append('<div class="invalid-feedback">Не правильный Email</div>');
            }
        }

        var isValidPhone = true;
        var phone = $form.find('#phone').val();
        if (!isEmpty(phone)) {
            isValidPhone = validatePhone(phone);
            if (!isValidPhone) {
                $form.find('#phone').addClass('is-invalid');
                $('#phone-group').append('<div class="invalid-feedback">Не правильный Phone</div>');
            }
        }

        var isEmptyFio = isEmpty($form.find('#fio').val());
        if (isEmptyFio) {
            $form.find('#fio').addClass('is-invalid');
            $('#fio-group').append('<div class="invalid-feedback">Не должен быть пустым</div>');
        }

        if (isValidFiles.length || !isValidEmail || isEmptyFio || !isValidPhone) {
            return false;
        }

        return true;

    };

    $(document.body).on('click', '#js-add-entries', function () {

        var $button = $('#js-add-entries');

        $('#myModalTitle').html('Добавить запись');
        $('#idmodal').modal({show: true});

        $('#myModalBody').text('');
        $.getJSON($button.data('action'), function (data) {
            $('#myModalBody').append(data.forms);
        });

        $('#myModalSave').bind('click', function () {

            if (validate()) {
                initSubnit();
            }

        })
    });


});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы