Sudarshan Kalebere Sudarshan Kalebere - 6 months ago 9
jQuery Question

Textarea is not getting validated in form

Hi I am trying to validate textarea with 3 inputs, all inputs are validating correcting but textarea is not getting validted and also not getting focus() when it is not valid,
Here is my code
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 code

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



});
});


Right now I have commented textarea validation code just to show other inputs are working fine.

2:When this form is valid how to check? I mean is there any method for this, because I want to open second accordian on valid.

Any suggestion please try here TryFiddle

Answer

You have to move bill_address from class to ID:

incorrect:

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

correct:

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