jqGrid Style 1

by LijoCheeran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<div class="modal fade in" id="divAddPayment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
    <div class="modal-dialog" style="width:900px; border:0px solid red;">
        <div class="modal-contentTest">
            <form id="formAddPayment" novalidate="novalidate">
                <div class="modal-body" style="float:left;width:100%;border:0px solid red;">
                    <div style="text-align: center;">
                        <div style="width: 330px; margin: 0 auto; text-align:left;">
                            <div class="panel panel-default gradientBack3" style="box-shadow: rgba(0, 0, 0, 0.3) 10px 10px 10px;">
                                <div class="panel-heading gradientBack1" style="border-bottom:1px solid red;margin-top:0px;">
                                    <h3 class="panel-title">Add Payment Info</h3>
                                </div>
                                <div class="panel-body">
                                    <ul id="errorSummaryList" name="errorSummaryList" style="color:red;">
                                    </ul>
                                    <div class="form-group" style="margin-bottom:10px;float:left;min-height:5px;border:0px solid red;width:300px;">
                                        <select class="form-control input-sm" style="float:left;display:inline;" id="ddlModeOfPayment" name="ddlModeOfPayment"...

JavaScript

$(function () {
  $("#btnAddPayment").click(function (event) {

          event.preventDefault();
          var resultValidation = $("#formAddPayment").valid();
          
          //alert(resultValidation);
          if (resultValidation == true) {
              var $modalDiv = $(event.delegateTarget);
              $modalDiv.addClass('loading');

              addInvoicePayment();
          }
   });
   
    //Form validation - Add Payment form
            $("#formAddPayment").validate({
                rules: {
                    "ddlModeOfPayment": {
                        required: true
                    },
                    "txtAmount": {
                        required: true
                    },
                    "txtPaymentSentDate": {
                        required: true
                    }
                },
                messages: {
                    "ddlModeOfPayment": {
                        required: "Please select  Mode of Payment."
                    },
                    "txtAmount": {
                        required: "Please enter Amount."
                    },
                    "txtPaymentSentDate": {
                        required: "Please enter Payment Sent Date."
                    },
                },

                showErrors: function (errorMap, errorList) {    

                    var errorLiArray = $.map(errorList, function(error){
                        var labelText = $(error.element).prev('p').find("label").text();
                        return "<li>" + labelText + ": " + error.message+ "</li>";
                    });

                    $('#errorSummaryList').html(errorLiArray.join(''))
                    $('#errorSummaryList').fadeIn('fast');
										
                    //Show error adjuscent to control also
                    this.defaultShowErrors();
                },
                submitHandler: function (form) {
                    return false;
                }
            });
   ...