只有在 HTML 表单中选择了某个下拉菜单时才需要字段

Question

我想知道只有在 select 编辑了某个下拉菜单时才需要某个字段。在我的表格中，此人会 select "Canada" 并且会出现下面的两个字段（省和邮政编码），这些字段在提交表格之前是必需的。如果此人 selected "United States"，则会显示州和邮政编码。

我遇到的问题是，如果我选择任一国家/地区，与该国家/地区无关的字段仍然是必需的，即使它们是隐藏的。我需要它，以便如果我选择美国，则需要省份或邮政编码，反之亦然。

非常感谢任何帮助:) 这是表格

<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">.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

你可以使用 .prop() 方法，所以对于你的每一个 .change 你都会有类似的东西

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

我很好奇为什么你有四个不同的 .change() 实例我会把它们都放在同一个 change() 实例下，因为它们都对同一件事做出反应。

Answer 2

是的，从可选字段中删除必填字段，然后使用 prop() 方法添加它们。

只有在 HTML 表单中选择了某个下拉菜单时才需要字段

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

html

javascript

forms

jquery

requiredfieldvalidator