nickywan123
2 weeks ago
430
7
General

Mandatory input field if option is selected?

Posted 2 weeks ago by nickywan123

I have a marital status where I can select single, married or divorce. Selecting married will allow me to input into the spouse information fields. I implemented it using jquery as below:

<div class="form-group col-md-6">
                                    <label for="marital_id">Marital Status</label>
                                    <select name="marital_id" id="marital_id" class="form-control">
                                        <option disabled selected value="default">Choose your marital status..</option>
                                        @foreach($maritals as $marital)
                                        <option class="text-capitalize" value="{{ $marital->id }}">{{ $marital->name }}</option>
                                        @endforeach
                                    </select>
                                </div>


    <!-- Spouse's Particular -->
                            <h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Spouse's Particulars</h5>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="spouse_full_name">Spouse's Full Name (as per NRIC)</label>
                                    <input type="text" name="spouse_full_name" class="form-control @error('spouse_full_name') is-invalid @enderror" id="spouse_full_name" placeholder="Full Name" value="{{ old('spouse_full_name') }}">
                                    @error('spouse_full_name')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="spouse_nric">Spouse's NRIC Number</label>
                                    <input type="text" name="spouse_nric" class="form-control @error('spouse') is-invalid @enderror" id="spouse_nric" placeholder="NRIC Number" value="{{ old('spouse_nric') }}">
                                    @error('spouse_nric')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="spouse_date_of_birth">Spouse's Date Of Birth</label>
                                    <input type="date" name="spouse_date_of_birth" class="form-control @error('spouse_date_of_birth') is-invalid @enderror" id="spouse_date_of_birth" placeholder="Spouse's Date Of Birth" value="{{ old('spouse_date_of_birth') }}">
                                    @error('spouse_date_of_birth')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="spouse_occupation">Spouse's Occupation</label>
                                    <input type="text" name="spouse_occupation" class="form-control @error('spouse_occupation') is-invalid @enderror" id="spouse_occupation" placeholder="Spouse's Occupation" value="{{ old('spouse_occupation') }}">
                                    @error('spouse_occupation')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="spouse_contact_office">Contact Number (Office)</label>
                                    <input type="text" name="spouse_contact_office" class="form-control @error('spouse_contact_office') is-invalid @enderror" id="spouse_contact_office" placeholder="Spouse's Office Contact" value="{{ old('spouse_contact_office') }}">
                                    @error('spouse_contact_office')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="spouse_contact_mobile">Contact Number (Mobile)</label>
                                    <input type="text" name="spouse_contact_mobile" class="form-control @error('spouse_contact_mobile') is-invalid @enderror" id="spouse_contact_mobile" placeholder="Spouse's Mobile Contact" value="{{ old('spouse_contact_mobile') }}">
                                    @error('spouse_contact_mobile')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="spouse_email">Email Address</label>
                                    <input type="text" name="spouse_email" id="spouse_email" class="form-control @error('spouse_email') is-invalid @enderror" placeholder="Spouse's Email Address" value="{{ old('spouse_email') }}">
                                    @error('spouse_email')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

With my jquery being written as below:

 // Disable spouse information if marital status is single or divorce
    $(document).on('change', 'select[name=marital_id]', function(e) {
    var el = $(this);

    if (el.val() == '1' || el.val() == '3') {
        
        //reset spouse fields to empty if user input changes to 1 or 3
         $('input[name=spouse_full_name').val('');
         $('input[name=spouse_nric').val('');
         $('input[name=spouse_full_name').val('');
         $('input[name=spouse_date_of_birth').val('');
         $('input[name=spouse_occupation').val('');
         $('input[name=spouse_contact_office').val('');
         $('input[name=spouse_contact_mobile').val('');
         $('input[name=spouse_email').val('');
       
        //disable spouse information if single
         $('#spouse_full_name').prop('readonly', true);
         $('#spouse_nric').prop('readonly', true);
         $('#spouse_date_of_birth').prop('readonly', true);
         $('#spouse_occupation').prop('readonly', true);
         $('#spouse_contact_office').prop('readonly', true);
         $('#spouse_contact_mobile').prop('readonly', true);
         $('#spouse_email').prop('readonly', true);
    } else {
         $('#spouse_full_name').prop('readonly',false);
         $('#spouse_nric').prop('readonly',false);
         $('#spouse_date_of_birth').prop('readonly',false);
         $('#spouse_occupation').prop('readonly',false);
         $('#spouse_contact_office').prop('readonly',false);
         $('#spouse_contact_mobile').prop('readonly',false);
         $('#spouse_email').prop('readonly',false);
    }
});

While this works fine but I want to allow the fields to be mandatory if married is selected before submitting the form. My current validation is like below:

 // Form Validation
    $("#register-form").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 8,
            },
            password_confirmation: {
                required: true,
                minlength: 8,
                equalTo: "#password"
            },
            full_name: {
                required: true,
                minlength: 3
            },
            nric: {
                required: true,
                minlength: 12,
                maxlength: 12
            },
            date_of_birth: {
                required: true,
            },
            gender_id: {
                required: true,
                valueNotEquals: "default"
            },
            race_id: {
                required: true,
                valueNotEquals: "default"
            },
            marital_id: {
                required: true,
                valueNotEquals: "default"
            },
            address_1: {
                required: true,
                minlength: 3
            },
          .............

Is there a way I can implement in the rules that to make spouse fields "required" if married is selected?

Using an if inside does not work. What would be a solution to this?

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