javascript - Textarea 未在表单中得到验证

Question

您好，我正在尝试使用 3 个输入来验证 textarea，所有输入都在验证更正，但是 textarea 没有得到验证，也没有得到 focus() 当它无效时，这是我的代码html

<div id="collapseOne" class="panel-collapse collapse in">
            <form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
                <div class="form-group">
                    <select name="" class="form-control" id="">
                        <option value="">Select Address</option>
                        <option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Address</option>
                    </select>
                </div>

                <div class="form-group">
                    <textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="" cols="30" rows="3"><?php echo $data['billing_address'] ?></textarea>
                </div>
                <div class="form-group">
                    <input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="<?php echo $data['billing_city'] ?>">
                </div>
                <div class="form-group">
                    <input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="<?php echo $data['billing_zip_code'] ?>">
                </div>
                <div class="form-group">
                    <input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="<?php echo $data['billing_country'] ?>">
                </div>
                <div class="form-group" style="width:150px;float:left;">
                    <button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
                </div>
            </form>
        </div>
    </div>
    <div id="ship_accord" class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" class="bill-ship-title" data-parent="#accordion" href="#collapseTwo">Shipping Address</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <input style="margin-left:12px;margin-top:15px;" type="checkbox" id="same_address">
            <span>Same as shipping address?</span>
            <form role="form" action="" method="post" class="shipping-form" id="shipping_form">
                <div class="form-group">
                    <textarea class="f-ship ship_address form-control form-group" placeholder="* Address" name="shipping[address]" id="" cols="30" rows="3"><?php echo $data['shipping_address'] ?></textarea>
                </div>
                <div class="form-group">
                    <input type="text" name="shipping[city]" placeholder="* City" class="f-ship form-email ship_city form-control" id="ship_city" value="<?php echo $data['shipping_city'] ?>">
                </div>
                <div class="form-group">
                    <input type="text" name="shipping[zip_code]" placeholder="* Zipcode" class="f-ship ship_zipcode form-control" id="ship_zipcode" value="<?php echo $data['shipping_zip_code'] ?>">
                </div>
                <div class="form-group">
                    <input type="text" name="shipping[country]" placeholder="* Country" class="ship_country f-ship form-control" id="ship_country" value="<?php echo $data['shipping_country'] ?>">
                </div>
                <div class="form-group" style="width:150px;float:left;">
                    <button id="payment-checkout" data-checkout-url="<?php echo $this->url('store-shopping-cart-payment-checkout'); ?>" data-auth-check-url="<?php echo $this->url('user-account-is-logged-in'); ?>" class="cart-billing-button-md">COMMANDEZ</button>
                </div>
            </form>
        </div>

JS代码

jQuery(document).ready(function($){
    jQuery(window).load(function(){

    $(document).on('click','#next_check',function(){
        var bill_address = $("#bill_address").val();
        var bill_city = $("#bill_city").val();
        var bill_country = $("#bill_country").val();
        var bill_zipcode = $("#bill_zipcode").val();
            if(bill_address == "" || bill_city == "" || bill_country == "" || bill_zipcode == ""){
                /*if(bill_address == "" || bill_address == null){
                    $('#bill_address').focus();
                    $('.error-msg').addClass('hide-it');
                    $('#bill_address').after('<label class="error-msg">Please enter your billing address</label>');
                    return false;
                }else{
                    $('.error-msg').addClass('hide-it');
                }*/
                if(bill_city == ""){ 
                    alert("Please enter your city");
                    $('#bill_city').focus();
                    $('.error-msg').addClass('hide-it');
                    $('#bill_city').after('<label class="error-msg">Please enter your billing city</label>')
                    return false;
                }else{
                    $('.error-msg').addClass('hide-it');
                }
                if(bill_zipcode == ""){ 
                    alert("Please enter your zipcode");
                    $('#bill_zipcode').focus();
                    $('.error-msg').addClass('hide-it');
                    $('#bill_zipcode').after('<label class="error-msg">Please enter your zipcode</label>')
                    return false;
                }else{
                    $('.error-msg').addClass('hide-it');
                }

                if(bill_country == ""){  
                    alert("Please enter your country");
                    $('#bill_country').focus();
                    $('.error-msg').addClass('hide-it');
                    $('#bill_country').after('<label class="error-msg">Please enter your billing address</label>')
                    return false;
                }else{
                    $('.error-msg').addClass('hide-it');
                }
                return false; //form will not submit, it will return false
            }else{
                alert('valid');

                $('.error-msg').addClass('hide-it');
                $("#ship_accord").on('show.bs.collapse', function (e) {
                    return true;
                })
                return true;
            }
    });    

$("#ship_accord").on('show.bs.collapse', function (e) {//i click on the panel header
        if ($('#billing-form').valid()) {
           return true;
        }else{
         return false;
        }
    })

$("#same_address").click( function(){
   if($(this).is(':checked')){
    CopyFields();
 if ($("#shipping_form").valid()) {
            //$('#proceed_check').prop('disabled', false);
        } else {
            //$('#proceed_check').prop('disabled', 'disabled');
        }
 }else{
    ClearFields();
     if ($("#shipping_form").valid()) {
            //$('#proceed_check').prop('disabled', false);
        } else {
            //$('#proceed_check').prop('disabled', 'disabled');
        }

 }
});
function ClearFields(){
   $('.f-ship').val("");
}
function CopyFields(){
   $(".ship_address").val($(".bill_address").val());
   $(".ship_city").val($(".bill_city").val());
   $(".ship_zipcode").val($(".bill_zipcode").val());
   $(".ship_country").val($(".bill_country").val());
}



});
});

现在我已经评论了 textarea 验证代码只是为了表明其他输入工作正常。

2:这个表格什么时候有效怎么查？我的意思是有什么方法可以做到这一点，因为我想在有效的时候打开第二个 Accordion 。

任何建议请在这里尝试TryFiddle

Answer 1

您必须将 bill_address 从类移至 ID:

不正确:

<textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="" cols="30" rows="3"><?php echo $data['billing_address'] ?></textarea>

正确:

<textarea autofocus class="f-bill form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"><?php echo $data['billing_address'] ?></textarea>