Prevent validation for a part of the form - PHP

Question

I have a form which have a selection for same or not the same address.

                                <label for="lastname"> Last Name <small>required</small>
                                <input type="text" name="s.lastname" value="<?php echo $value['s_lastname'];?>" placeholder="Last Name" required />
                            </label>
                            <label for="email"> Email <small>required</small>
                                <input type="text" name="s.email" value="<?php echo $value['email'];?>" placeholder="Your Email" required pattern="email"/> 
                                <small class="error">Email is not valid.</small>                               
                            </label>
                            <label for="phone"> Phone
                                <input type="text" name="s.phone" value="<?php echo $value['s_phone'];?>" placeholder="Phone number" />                                                               
                            </label>


    <!-- this is same radio button -->
                <fieldset>
                    <legend>Shipping and billing address the same?</legend>
                        <input checked type="radio" name="checkoutaddress" value="same"/><label for="same">Yes</label>
                        <input type="radio" name="checkoutaddress" value="different"/><label for="different">No</label>
                </fieldset
<!-- this is same radio button end -->


 <label for="lastname"> Last Name <small>required</small>
                                <input type="text" name="b.lastname" value="<?php echo $value['b_lastname'];?>" placeholder="Last Name" required />
                            </label>
                            <label for="b.email"> Email <small>required</small>
                                <input type="text" name="b.email" value="<?php echo $value['email'];?>" placeholder="Your Email" required pattern="email"/> 
                                <small class="error">Email is not valid.</small>                               
                            </label>
                            <label for="b.phone"> Phone
                                <input type="text" name="b.phone" value="<?php echo $value['b_phone'];?>" placeholder="Phone number" />                                                               
                            </label>

Then I have a jquery script to check if the same radio button is checked the "b" part of form will be collapsed.

    $("input[name$='checkoutaddress']").click(function() {
    var checkShip = $(this).val();

    $("div.checkship").hide();
    $("#checkoutaddress" + checkShip).show();
});

The problem is all the fields are mandatory fields. So If I click the submit button it will prevent me to submitting the form. This is my question: Is there any way to prevent the "b" part of the form to be checked or make them not exist in the form, so I can submit the form if I check the same radio button.

Thanks in advanced!

Answer 1

Remove the 'required' from the tag for the shipping address. When the radio button is checked and the b part of form is collapsed, you need to enable the required tag. Do this by :

ValidatorEnable(document.getElementById(''), true);

Conversely, you can set it to default in the beginning and disable if the no radio button is choosen.

Answer 2

Add an ID to the different to make selector querying simple. Add a fieldset with an id to the optional "b" elements to make requirement toggling easy. check if different is checked, then update the fields accordingly with the required tag.

$('#itsdifferent').on('click', function(){
    var $this = this;
    $('#optionbfieldset input').each(function(){
        if($this.checked){
            $(this).prop('required', true);
        }else{
            $(this).removeProp('required');
        }
    });
});