DWA-15, P3: jQuery Form Validation Script

random-user.js

// jQuery script for validating user input
$(document).ready(function () {
    $('#random-user').append("Form submitted successfully!");

    $('#random-user').validate({
        // initialize jquery validation plugin
        rules: {
            count: {
                required: true
            },
            add_email: {
                required: true
            }
            add_address: {
                required: true
            }
        }
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('Form submitted successfully!').addClass('valid')
            .closest('.form-group').removeClass('error').addClass('success');
        }
    });
});

And here is the random-user HTML form:

<form id="random-user" method='POST' action='/random-user/create'>

    <div class='form-group'>
       <label>* User Count (Between 0-9):</label>
       <input
           type='number'
           id='count'
           name='count'
           value='{{ old('count') }}'
       >
       <div class='error'>{{ $errors->first('count') }}</div>
    </div>

    <div class='form-group'>
       <input
           type='checkbox'
           id='add_email'
           name='add_email'
           value='add_email'
       >
       <label>Generate User Email?</label>
       <div class='error'>{{ $errors->first('add_email') }}</div>
    </div>

    <div class='form-group'>
       <input
           type='checkbox'
           id='add_address'
           name='add_address'
           value='add_address'
       >
       <label>Generate User Address?</label>
       <div class='error'>{{ $errors->first('add_address') }}</div>
    </div>

    <button type="submit" class="btn btn-primary">Create Random Users</button>

    <section>
      <h3>Random Users Below</h3>
        <table class="table">
            <thead>
                <tr>
                    <th>User Name</th>
                    <th>User Email</th>
                    <th>User Address</th>
                </tr>
            </thead>

            <tbody>
                @forelse($user_data as $users)
                    <td>
                        @foreach($users as $user)
                            <p>
                            {{ $user }}
                        @endforeach
                    </td>
                @empty
                    <h3>No User Generated Yet</h3>
                @endforelse
            </tbody>
        </table>
    </section>

    {{--
    <ul class=''>
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
    --}}

    <div class='error'>
        @if(count($errors) > 0)
            Please correct the errors above and try again.
        @endif
    </div>
</form>