Jquery validation and working with twitter bootstrap panels

Question

I have a bootstrap (ecommerce checkout) form using jquery validation plugin and need to achieve a few behavior:

1. The panel collapsing triggers a validation event (see code below) allowing user to move to next panel - right now the validation code is not working and adding the 'has-error' class though the submission handler is firing. I am trying to figure out what is going on. There are other forms on the same page that validate fine.
2. When 'next' is clicked, collapse the panel into static text with the values the user enters -- when panel uncollapsed the form re-appears so user can modify.

Help is appreciated.

FORM CODE

<form id="storecheckout" method="post" action="/mobile/store_checkout.cfm" class="form-horizontal" role="form">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1" style="cursor:pointer;">
<h2 class="panel-title">
<span class="badge">1</span> Customer/Shipping Information <span class="glyphicons glyphicons-circle-minus  pull-right"></span>
</h2>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<div class="form-group">
<label for="ship_firstName" class="col-sm-4 control-label">First Name :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_firstName" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="ship_lastName" class="col-sm-4 control-label">Last Name :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_lastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="ship_ad1" class="col-sm-4 control-label">Address/1 :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_ad1" name="ship_ad1" placeholder="Address/1">
</div>
</div>
<div class="form-group">
<label for="ship_ad2" class="col-sm-4 control-label">Address/2 :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_ad2" name="ship_ad2" placeholder="Address/2">
</div>
</div>
<div class="form-group">
<label for="ship_city" class="col-sm-4 control-label">City :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_city" name="ship_city" placeholder="City">
</div>
</div>
<div class="form-group">
<label for="ship_state" class="col-sm-4 control-label">State/Province :</label>
<div class="col-sm-8">
<SELECT NAME="ship_state" id="ship_state" class="form-control">
<OPTION VALUE="AL" >Alabama</OPTION>
</SELECT>
</div>
</div>

<div class="form-group">
<label for="ship_zip" class="col-sm-4 control-label">Postal Code :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_zip" name="ship_zip" placeholder="Postal Code">
</div>
</div>
<div class="form-group">
<label for="ship_country" class="col-sm-4 control-label">Country :</label>
<div class="col-sm-8">
<select name="ship_country" id="ship_country" class="form-control">
<option value="US" selected>United States</option>
</select>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-4 control-label">Email :</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-4 control-label">Phone :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone">
</div>
</div>

</div>



<div class="row">
<div class="col-xs-6 col-sm-4">&nbsp;
</div>
<div class="col-xs-6 col-sm-4 col-sm-offset-4">
<a data-toggle="collapsex" data-parent="#accordion" href="#collapse2x" aria-expanded="true" aria-controls="collapse2x" class="btn btn-success btn-block pull-right next">Next <span class="glyphicon glyphicons glyphicons-forward"></span></a> </div>

</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2" data-parent="#accordion" aria-expanded="false">
<h2 class="panel-title">
<span class="badge">2</span> Shipping Method <span class="glyphicons glyphicons-circle-plus pull-right" aria-hidden="true"></span>
</h2>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">

List Shipping Methods

<div class="row">
<div class="col-xs-6 col-sm-4">&nbsp;</div>
<div class="col-xs-6 col-sm-4 col-sm-offset-4">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true" aria-controls="collapse3" class="btn btn-success btn-block pull-right next">Next <span class="glyphicon glyphicons glyphicons-forward"></span></a> </div>

</div>
</div>
</div>
</div>      

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading3" data-parent="#accordion" aria-expanded="false">
<h2 class="panel-title">
<span class="badge">3</span> Payment Information<span class="glyphicons glyphicons-circle-plus pull-right" aria-hidden="true"></span>
</h2>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">

Payment Info

</div>
</div>
</div>

<button type="submit" id="submit" class="btn btn-block btn-large btn-success">Submit Order</button>
<input type="submit" name="su" value="sub">

<!-- end panel group -->
</div>
</form>  

PAGE JQUERY

$(document).ready(function() {  

// override jquery validate plugin defaults
$.validator.setDefaults({
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
            //$(element).closest('td').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
            //$(element).closest('td').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.help-block').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertBefore(element);
            }
        }
});

$("#storecheckout").validate({
    ignore: "",
    rules: {
        ship_firstname: "required"
    },
    messages: {
        ship_firstname: "Please enter your first name"
    },
    onkeyup: false, //turn off auto validate whilst typing
    submitHandler: function (form) {
            alert('is good');
            return false;
        }
});

// validate sections on next click
$('.next').click(function(e){
    e.preventDefault();
    var sectionValid = true;
    var collapse = $(this).closest('.panel-collapse.collapse');
    $.each(collapse.find('input, select, textarea'), function(){
        if(!$(this).valid()){
            sectionValid = false;
        }
    });
    if(sectionValid){
        collapse.collapse('toggle');
        collapse.parents('.panel').next().find('.panel-collapse.collapse').collapse('toggle');
    }
});

$('.previous').click(function(e){
    e.preventDefault();
    var sectionValid = true;
    var collapse = $(this).closest('.panel-collapse.collapse');
    $.each(collapse.find('input, select, textarea'), function(){
        if(!$(this).valid()){
            sectionValid = false;
        }
    });
    if(sectionValid){
        collapse.collapse('toggle');
        collapse.parents('.panel').prev().find('.panel-collapse.collapse').collapse('toggle');
    }
}); 

    });

Answer 1

In your form input , i have found that you have not given

"name"

attribute to input

Your code

<input type="text" class="form-control" id="ship_firstName" placeholder="First Name">

Updated code

<input type="text" class="form-control" id="ship_firstName"  name="ship_firstName" placeholder="First Name">

This will work