Field only required if certain dropdown is selected in a HTML form

Question

I was wondering how a certain field is required only if a certain dropdown is selected. In my form, the person would select "Canada" and two fields underneath will appear(province and postal code), which are required before person submits the form. And if the person selected "United States", the state and zip code will appear instead.

The trouble i am having is that if i choose either country, the fields that are not associated with that country are still required even though they are hidden. I need it so that if i choose United States, then province nor postal code would be required, and the same the other way around.

Any help is greatly appreciated:) Here is the form

<script type='text/javascript'>//<![CDATA[ 

$('select[name=country]').change(function () {
        if ($(this).val() == 'Canada') {
            $('#provinceselect').show();
            $('#province').prop('required',true);

        } else {
            $('#provinceselect').prop('required',false);
            $('#provinceselect').hide();
            $('#province').prop('required',false);

        }

    });



    $('select[name=country]').change(function () {
        if ($(this).val() == 'Canada') {
            $('#postalselect').show();
            $('#postal').prop('required',true);

        } else {
            $('#postalselect').prop('required',false);
            $('#postalselect').hide();
            $('#postal').prop('required',false);

        }

    });


        </script>

<!--HTML Form-->

<form action="PPPaymentForm/PPPaymentForm.php"  method="post" name="topchoiceform" id="topchoiceform">
        <input placeholder="Company Name" type="text" name="companyname">
        <input placeholder="First Name" type="text" name="first_name" required>
        <input placeholder="Last Name" type="text" name="last_name" required>
        <input placeholder="Email" type="email" name="email" id="email" required>

    <!--Country select-->     
    <select class="countrycss" id="country" name="country" required>
    <option value="" selected="selected">Please Select Country</option>
    <option value="Canada" id="Canada">Canada</option>
    <option value="United States" id="United States">United States</option>

    </select>

    <!--Province select-->
    <div id="provinceselect" style="display:none;">
    <select class="provincecss" id="province" name="province" required>
    <option value="" selected="selected">Please Select Province</option>
    <option value="Alberta" id="Alberta">Alberta</option>
    <option value="British Coloumbia" id="British Coloumbia">British Coloumbia</option>

    </select>
    </div>

    <!--State select-->
    <div id="stateselect" style="display:none;">
    <select class="statecss" id="state" name="state">
    <option value="" selected="selected">Please Select State</option>
    <option value="Arkansas" id="Arkansas">Alaska</option>
    <option value="Hawalli" id="Hawalli">Hawalli</option>

    </select>

    </div>



        <!--Postal select-->
        <div id="postalselect" style="display:none;">
        <input placeholder="Postal Code" type="text" name="postal" required>
        </div>


        <!--Zip select-->
        <div id="zipselect" style="display:none;">
        <input placeholder="ZipCode" type="text" name="zip" required>
        </div>

        <input placeholder="City" type="text" name="city" required>

        <input placeholder="Address" type="text" name="address1" required>

        <input name="shipping" class="shipping" type="radio" id="shipping" checked/>
        <label class="shippingcheck">$19.99 Shipping – DATABASE SENT ON CD ROM </label>
        <br>
        <input name="shipping" class="shipping" type="radio" id="noshipping" />
        <label class="shippingcheck">FREE SHIPPING – DATABASE SENT VIA EMAIL</label>

        <br>
        <button name="submit" type="submit" id="submit">Pay Now</button>

Answer 1

You could use the .prop() method, so for each of your .change you will have something like

$('select[name=country]').change(function () {
        if ($(this).val() == 'Canada') {
            $('#provinceselect').show();
            $('#provinceselect').prop('required',true);
        } else {
            $('#provinceselect').prop('required',false);
            $('#provinceselect').hide();
        }
    });

I'm curious as to why you have four different instances of .change() I would have put them all under the same instance of change() since they are all reacting to the same thing.