Textarea未经过形式验证

时间：2016-06-04 10:01:53

标签： javascript jquery html validation

您好我正在尝试使用3个输入验证textarea，所有输入都在验证纠正但是 textarea没有得到验证，并且当无效时也没有获得焦点（）， 这是我的代码 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：当这个表格有效时如何检查？我的意思是有任何方法，因为我想打开第二个有效的手风琴。

如有任何建议，请尝试TryFiddle

3 个答案:

答案 0 :(得分：2)

你忘了把ID放入textareas。 （谢谢@AliSheikhpour）

答案 1 :(得分：2)

您必须将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>

答案 2 :(得分：0)

试试这个..

＆＃13;
＆＃13; 
$(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.trim().length){
                alert("Please enter your bill adddress");
                    $('.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());
}

});
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
$(document).ready(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.trim().length){
                alert("Please enter your bill adddress");
                    $('.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());
}

});
＆＃13; 
.hide-it{
  display:none;
}
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<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">
                    <textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" value="" cols="30" rows="3"></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="">
                </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="">
                </div>
                <div class="form-group">
                    <input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
                </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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题