2016-06-04 2 views
1

Привет Я пытаюсь проверить текстовое поле с 3 входами, все входы проверки коррекции, но TextArea не получает validted, а также не получает фокус(), когда он не действует, Вот мой код HTMLTextarea не получает подтверждено в форме

<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()); 
} 



}); 
}); 

Сейчас я прокомментировал код проверки текстовой, чтобы показать другие входы работают отлично.

2: Когда эта форма действительна, как проверить? Я имею в виду, есть ли какой-либо метод для этого, потому что я хочу открыть второй согласный на действительном.

Любое предложение, пожалуйста, попробуйте здесь TryFiddle

+0

Вы забыли установить идентификатор для текстового поля, а не класс? –

+0

Спасибо, жаль, мой плохой, такой глупый из меня Можете ли вы рассказать мне, как проверить, действительна ли форма или нет? Только синтаксис Imean –

+0

Ваш код совершенно верный. Просто переместите ** bill_address ** из класса в ID в текстовое поле. –

ответ

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> 
+0

, можете ли вы взглянуть на этот мой вопрос? http://stackoverflow.com/questions/37629544/how-to-get-attributes-values-on-change-of-select-dropdown –

2

Вы забыли поставить идентификаторы в течение прокручиваемым. (Спасибо @AliSheikhpour)

+0

@SudarshanKalebere Это потому, что вы прокомментировали JavaScript. – gcampbell

+0

Вы заслуживаете продолжения, но ответ, данный @ALI –

0

Try это ..

$(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()); 
 
} 
 

 
});

$(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()); 
 
} 
 

 
});
.hide-it{ 
 
    display:none; 
 
}
<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>

+0

не могли бы вы взглянуть на этот мой вопрос? http://stackoverflow.com/questions/37629544/how-to-get-attributes-values-on-change-of-select-dropdown –

Смежные вопросы