Sun
160
16
Laravel

Required HTML Validation not working

Posted 4 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.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.