Sun
268
16
Laravel

Required HTML Validation not working

Posted 8 months ago by Sun

Hi guys, I am new to Ajax. I just created an edit modal and realized the ``required`' validation from HTML5 is not working.

Edit Modal

<div id="editModal" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        @csrf

                        <input id="id_edit" type="text" class="form-control" name="id_edit" hidden>

                        <div class="form-group row">
                            <label for="first_name_edit" class="col-md-4 col-form-label text-md-right">First Name</label>
                            <div class="col-md-6">
                                <input id="first_name_edit" type="text" class="form-control" name="first_name_edit" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="last_name_edit" class="col-md-4 col-form-label text-md-right">Last Name</label>
                            <div class="col-md-6">
                                <input id="last_name_edit" type="text" class="form-control" name="last_name_edit" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="email_edit" class="col-md-4 col-form-label text-md-right">Email</label>
                            <div class="col-md-6">
                                <input id="email_edit" type="email" class="form-control" name="email_edit" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="user_role_edit" class="col-md-4 col-form-label text-md-right">User Role</label>
                            <div class="col-md-6">
                                {!! Form::select('user_role_edit', $roles->all(), null, ['class'=>'form-control', 'id' => 'user_role_edit', 'required']) !!}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="user_status_edit" class="col-md-4 col-form-label text-md-right">User Status</label>
                            <div class="col-md-6">
                                {!! Form::select('user_status_edit', $status->all(), null, ['class'=>'form-control', 'id' => 'user_status_edit', 'required']) !!}
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button value="submit" class="btn btn-primary edit" data-dismiss="modal">{{ __('Update') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Javascript

//edit form
        $(document).on('click', '.edit-modal', function() {
            $('.modal-title').text('Edit User');
            $('#id_edit').val($(this).data('id'));
            $('#first_name_edit').val($(this).data('first_name'));
            $('#last_name_edit').val($(this).data('last_name'));
            $('#email_edit').val($(this).data('email'));
            $('#user_role_edit').val($(this).data('role_id'));
            $('#user_status_edit').val($(this).data('status_id'));
            id = $('#id_edit').val();
            $('#editModal').modal('show');
        });

        $('.modal-footer').on('click', '.edit', function() {
            $.ajax({
                type: 'PUT',
                url: '/rainman-users/' + id + '/update',
                dataType: 'json',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'id': $("#id_edit").val(),
                    'first_name': $("#first_name_edit").val(),
                    'last_name': $("#last_name_edit").val(),
                    'email': $("#email_edit").val(),
                    'role_id': $("#user_role_edit").val(),
                    'status_id': $("#user_status_edit").val()
                },
                success: function(data) {
                    console.log(data);
                    window.location.reload();
                }
            });
        });

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.