2

我上周刚开始学习 HTML/CSS、javascript 和 jQuery，非常感谢一些帮助。我创建了一个带有复选框（id #ship_to_billing）的表单，然后是一个包含 5 个文本字段的字段集（id #shipping_info）。我使用 JQuery 进行了设置，如果选中该复选框，它会切换其他字段并隐藏它们。但是，我不知道如何另外需要一个或另一个，要么必须选中复选框，要么必须完成字段集中的所有文本字段。我不需要警报。请帮忙！

提前谢谢大家，苏珊

<a type="button" class="btn btn-primary" href="#product-options" data-           
toggle="modal">Buy This!</a>                                        
    <div class="modal hide fade" id="product-options">                    
        <div class="modal-header center">
             <a class="close" data-dismiss="modal">x</a>
                <h3>When, Where and How?</h3>
         </div>
            <div class="modal-body l-m"> 
            {% include 'datepicker' %}
            <p>
            <input type="hidden" name="properties[ship_to_billing]" value="" />                          
            <label for="ship_to_billing" style="max-width:335px;">
            <input id="ship_to_billing" type="checkbox" name="properties[Ship to Billing Address]" value="Yes" {% if properties.ship_to_billing %} checked="checked"{% endif %} />
            <font size=1>Check here to have items shipped to your billing address (collected during checkout). Otherwise please fill out the information below.</font>
            </label><br /> 
            </p>                        
          <div class="fieldgroup" id="shipping_info">
            <label for="shipping_name">Name of Recipient:</label>      
            <input class="input-xlarge" type="text" id="shipping_name" placeholder="Name" name="properties[Recipient]" required="required" />                                 
            <p>
            <label for="address_street">Shipping Address:</label>
            <input class="input-xlarge" type="text" id="address_street" placeholder="Street Address" name="properties[Address]" required="required" />
            <input class="input-xlarge" type="text" id="address_city" placeholder="City" name="properties[City]" required="required" />
            <input class="input-medium" type="text" id="address_province" placeholder="State" name="properties[State]" required="required" />
            <input class="input-medium" type="text" id="address_zip" placeholder="Zip Code" name="properties[Zip]" required="required" />
            </p>
          </div>
          <p>
          <label for="gift_msg">Gift Message :</label>                                
          <textarea id="gift_msg" placeholder="Please type your message" name="properties[Gift Message]" rows="4" cols="45"></textarea> 
          </p>                              
       </div>

       <div class="modal-footer">
           <div class="btn-group">
                <button href="#" class="btn" data-dismiss="modal">Cancel</button>
                <button type="submit" onclick="return validateShipping();" class="btn btn-primary" id="addtocart">Add To Cart</button>
            </div>
          </div>              
        </div>

查询：

<script>
$('#ship_to_billing').change(function(){
$('#shipping_info').toggle('show');
});
</script>
4

2 回答 2

3

客户端验证总是次于服务器端验证，因为用户总是可以禁用 Javascript 或强制发布可以覆盖浏览器功能的废话，但您的服务器不能轻易被愚弄！就是说，您走在正确的轨道上，尽管我很想对其进行一些修复……首先，您的 HTML（删节）：

<form method="post">
    <input id="ship_to_billing" type="checkbox" name="properties" />
    <div class="fieldgroup" id="shipping_info">
        <input type="text" id="shipping_name" name="properties[Recipient]" />
        <input type="text" id="address_street" name="properties[Address]" />
        ...
    </div>
    <input type="submit" onclick="return validateMyStuff();" value="Submit" />
</form>

接下来，你的脚本，稍微更健壮：

<script src="/path/to/jquery.js"></script>
<script type="text/javascript">

    // this will run when the document's done loading...
    $(function(){
        $("#ship_to_billing").change(function(){
            // make sure of the checked state...
            // hide the fields if the checkbox is checked...
            // 'this' is the checkbox...
            if ($(this).is(":checked")) // fixed error here! ;)
                $("#shipping_info").hide();
            else
                $("#shipping_info").show();
        });
    });

    // validate the input, only if the checkbox is not checked...
    // this will be called when your submit button is clicked...
    function validateMyStuff() {
        if (!$("#ship_to_billing").is(":checked")) {
            // check to see that the other input fields have values...
            var inputs = $("#shipping_info input");
            var ready = true;
            inputs.each(function(){
                // 'this' is the current input we're validating...
                if ($(this).val() == '') {
                    ready = false;
                    return false; // exits jQuery '.each' function...
                }
            });
            if (!ready) {
                alert("You forgot to fill in something!");
                return false;
            }
        }
        return true;
    }

</script>

好吧，根据原始问题中的有限信息，这是我能给出的最佳解释。希望这可以帮助！:)

编辑1：

我很抱歉！)我在 JavaScript 代码的第 10 行遗漏了一个右括号！我已经解决了这个问题，并且将上面的代码复制/粘贴到 HTML 页面中似乎工作正常。请记住将您的 jQuery 脚本包含在其余脚本之上，并将您的脚本放在<head>...</head>HTML 部分中。

于 2013-09-23T22:41:27.387 回答
0

至于客户端验证，您可以为字段集中的所有输入提供这样shipping_info的required属性

$('#shipping_info input').attr('required', true);

但这并不能保证这些字段会被填充，因为用户可以绕过它。因此，无论您做什么，都必须在服务器端检查它。

于 2013-09-23T22:43:13.370 回答