jquery validation not working on special character restriction

Question

1.I'm using jquery validation and when user enter wrong input so it will display the error. its finely working while any input is required. but the problem is while need to enter only integer value then also accepting special character. I want if anyone enter special character where i declare phone number or any number field there should accept only digits not character. 2. The second problem is while checking validation so some error message is displaying. While error message are displaying so some input field changing their state to another side i don't know why css not working on it. here is my code.

  $.validator.addMethod('decimal', function(value, element) {
  return this.optional(element) || /^((\d+(\\.\d{0,2})?)|((\d*(\.\d{1,2}))))$/.test(value);
}, "Please enter a correct number, format 0.00");
  $().ready(function () {
  // validate signup form on keyup and submit
  $("#signup").on('submit', function(e) {
    e.preventDefault();
    $('#log').text('Form is valid? ' + $(this).valid().toString());
  });

  $("#signup").validate({
    rules: {
      FirstName:{
        required:true,
        minlength: 3,
        maxlength:50
      }, 
      LastName:{
        required: true,
        minlength: 3,
        maxlength:50
      }, 
      Address1:{
        minlength: 3,
        maxlength:100
      }, 
      Address2:{
        minlength: 3,
        maxlength:100
      }, 
      upCountry:{
        required:true
      }, 
      pickupCity:{
        required:true
      },
      PIN:{
        minlength:6,
        maxlength:6
      },
      PhoneMobile :{
        minlength:10,
        maxlength:12
      },
      PhoneResidence :{
        minlength:11,
        maxlength:15
      },
      password :{
        required: true
      },
      Email :{
        required: true,
        maxlength:100
      },
      AdhaarNumber :{
        required: true,
        minlength:12,
        maxlength:12
      },
      SkypeID :{
        minlength:10,
        maxlength:50
      },
      AgencyName :{
        minlength:3,
        maxlength:100
      },
      AgencyAddress1 :{
        minlength:3,
        maxlength:100
      },
      AgencyAddress2 :{
        minlength:3,
        maxlength:100
      },
      AgencyCity :{
        required: true
      },
      AgencyState :{
        required: true
      },
      AgencyCountry :{
        required: true
      },
      AgencyPIN :{
        minlength:6,
        maxlength:6
      },
      AgencyPhoneOffice :{
        minlength:12,
        maxlength:15
      },
      AgencyFAX :{
        minlength:12,
        maxlength:15
      },
      AgencyBusinessType :{
        required: true
      },
      AgencyBusinessYear :{
        required: true
      },
      AgencyBookingVolume :{
        minlength:1,
        maxlength:5
      },
      SecuritizationModeType :{
        required: true
      },
      AgencyPAN :{
        minlength:10,
        maxlength:12
      },
      TDSExemption :{
        required: true,
        decimal: true
      },
      TDSPercentageEx :{
        required: true,
        decimal: true
      },
      References :{
        minlength:5,
        maxlength:150
      },
      Consolidators :{
        minlength:5,
        maxlength:150
      },
      Remarks :{
        minlength:5,
        maxlength:150
      }

      
    },
    messages: {
      FirstName:{
        required: "Please Enter Ur First Name",
        minlength: 'please enter atleast three character',
        maxlength: 'Please do not enter more than 50 words' 
      },
      LastName:{
        required: "Please enter your last name",
        minlength: 'please enter atleast three character',
        maxlength: 'Please do not enter more than 50 words' 
      },
      Address1:{
        minlength: 'please enter atleast three character',
        maxlength: 'Please do not enter more than 50 words'
      },
      Address2:{
        minlength: 'please enter atleast three character',
        maxlength: 'Please do not enter more than 50 words'
      },
      upCountry:{
        required: "Please select the country"
      },
      pickupCity:{
        required: "Please select the city"
      }, 
      PIN:{
        minlength:'Please enter atleast 6 digits',
        maxlength:'Please do not enter more than 6 digits'
      },
      PhoneMobile :{
        minlength:'Please enter atleast 10 digits',
        maxlength:'Please do not enter more than 12 digits'
      }
    },
    submitHandler: function (form) { // for demo
      alert('valid form');
      return false;
    }
  });


});

label { width: 200px; float: left; margin: 0 130px 0 0;}
    span { display: block; margin: 0 0 5px; font-size: 0.8em; font-weight: bold; color: grey; }
    input { width: 300px; border: 1px solid #000; padding: 10px; }
    select { width: 321px; border: 1px solid #000; padding: 9px; }
    .error{color: red;}
    .headC{
				text-align: center;
				font-weight: bold;
				padding: 15px 0px 15px 0px;
				font-size: 27px;
				background: #ff8f35;
				color: #ffff;
				
				background-repeat: no-repeat;
  				background-size: 5px 100px;

			}

<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/additional-methods.js" type="text/javascript"></script>
<form name="signup" id="signup" action="SignUpServlet" method="post">
   <div style="padding: 5%;">
      <div class="headC" >Register Here</div>
   </div>
   <div style="padding-left: 25%; padding-top: 1%;">
      <!-- first panel start from here -->
      <div>
         <label for="company">
            <span>Owner's First Name</span>
            <div class="input">
               <input name="FirstName" type="text" placeholder="First Name"id="FirstName" tabindex="1"
                  style="color:Gray;"/>
            </div>
            <span>Owner's Last Name</span>
            <div class="input">
               <input name="LastName" type="text" placeholder="Last Name" id="LastName" tabindex="2" 
                  style="color:Gray;" />
            </div>
            <span>Residential Address</span>
            <div class="input">
               <input name="Address1" type="text" placeholder="Address1" id="Address1" tabindex="3"/>
            </div>
            <br>
            <div class="input">
               <input name="Address2" type="text" placeholder="Address2" id="Address2" 
                  tabindex="4"/>
            </div>
            <span>Country</span>
            <div class="input">
               <!-- <?php $countries = get_datafromTable('countries');//  print_r($countries); ?> -->
               <select name="Country"  id="upCountry" class="input" required="required" tabindex="5">
                  <option value="">------------------------Select Country-------------------------</option>
                  <!-- <? foreach($countries as $countriesNames){ ?> -->
                  <option value="<?php echo $countriesNames['id'];?>"><?php echo $countriesNames['name']; ?></option>
                  <!-- <? } ?> -->
               </select>
            </div>
            <span>City</span>
            <div class="input">
               <select class="input"  name="City" id="pickupCity" required="required" tabindex="6">
                  <option value="">First Select Country</option>
               </select>
            </div>
            <span>Pin</span>
            <div class="input">
               <input name="PIN" type="text" id="PIN" tabindex="7"/>
            </div>
         </label>
      </div>
      <!--     first panel form second section start from here -->
      <span>Agency Name</span>
      <div class="input">
         <input name="AgencyName" type="text" id="AgencyName" tabindex="15"/>
      </div>
      <span>Agency Address:</span>
      <div class="input">
         <input name="AgencyAddress1" type="text" id="AgencyAddress1" tabindex="16"/>
      </div>
      <br>
      <div class="input">
         <input name="AgencyAddress2" type="text" id="AgencyAddress2" tabindex="17"/>
      </div>
      <span>City</span>
      <div class="input">
         <select class="input"  name="AgencyCity" id="AgencyCity" class="form-control" required="required" tabindex="18">
            <option value="">---------------------------Select City---------------------------</option>
            <option value="60">Vishakhapatnam</option>
            <option value="61">Warangal</option>
            <option value="112">YAMUNA NAGAR</option>
            <option value="Other">Other</option>
         </select>
      </div>
      <span>State/Province</span>
      <div class="input">
         <select class="input" name="AgencyState" id="AgencyState" tabindex="19">
            <option value="">--------------------------Select State--------------------------</option>
            <option value="Other">Other</option>
         </select>
      </div>
      <span>Country</span>
      <div class="input">
         <select class="input" name="AgencyCountry" id="AgencyCountry" tabindex="20">
            <option value="">------------------------Select Country-------------------------</option>
            <option value="AQ">Antarctica</option>
            <option value="AG">Antigua &amp; Barbuda</option>
            <option value="HM">Heard &amp; Mcdonald Islands</option>
            <option value="LA">Lao People&#39;s Democratic Republic</option>
         </select>
      </div>
      <span>Pin</span>
      <div class="input">
         <input name="AgencyPIN" type="text" id="AgencyPIN" tabindex="21"/>
      </div>
      <span>Phone Number(Off)</span>
      <div class="input">
         <input name="AgencyPhoneOffice" type="text" id="AgencyPhoneOffice"tabindex="22"/>
      </div>
      <span>Agency Name</span>
      <div class="input">
         <input name="AgencyName" type="text" id="AgencyName" tabindex="15"/>
      </div>
      <span>Agency Address:</span>
      <div class="input">
         <input name="AgencyAddress1" type="text" id="AgencyAddress1" tabindex="16"/>
      </div>
      <br>
      <div class="input">
         <input name="AgencyAddress2" type="text" id="AgencyAddress2" tabindex="17"/>
      </div>
      <span>City</span>
      <div class="input">
         <select class="input"  name="AgencyCity" id="AgencyCity" class="form-control" required="required" tabindex="18">
            <option value="">---------------------------Select City---------------------------</option>
            <option value="60">Vishakhapatnam</option>
            <option value="61">Warangal</option>
            <option value="112">YAMUNA NAGAR</option>
            <option value="Other">Other</option>
         </select>
      </div>
      <span>State/Province</span>
      <div class="input">
         <select class="input" name="AgencyState" id="AgencyState" tabindex="19">
            <option value="">--------------------------Select State--------------------------</option>
            <option value="Other">Other</option>
         </select>
      </div>
      <span>Country</span>
      <div class="input">
         <select class="input" name="AgencyCountry" id="AgencyCountry" tabindex="20">
            <option value="">------------------------Select Country-------------------------</option>
            <option value="AQ">Antarctica</option>
            <option value="AG">Antigua &amp; Barbuda</option>
            <option value="HM">Heard &amp; Mcdonald Islands</option>
            <option value="LA">Lao People&#39;s Democratic Republic</option>
         </select>
      </div>
      <span>Pin</span>
      <div class="input">
         <input name="AgencyPIN" type="text" id="AgencyPIN" tabindex="21"/>
      </div>
      </label>  
   </div>
   </div>
   <div style="padding-top: 20%; padding-left: 40%;">
      <input type="submit" id="submit" value="submit">
   </div>
</form>

As you see. 1.I want to whenever i declare phone number or a number filed so in that field only digit should be enter not special character. 2.while require field is not select then displaying the error and when error message are displaying then some filed are changing their state. i want all the error message should be display below side of the their fields. thank you.

Answer 1

$.validator.addMethod('decimal', function(value, element) {
      return this.optional(element) || /^((\d+(\\.\d{0,2})?)|((\d*(\.\d{1,2}))))$/.test(value);
    }, "Please enter a correct number, format 0.00");
      $().ready(function () {
      // validate signup form on keyup and submit
      $("#signup").on('submit', function(e) {
        e.preventDefault();
        $('#log').text('Form is valid? ' + $(this).valid().toString());
      });

      $("#signup").validate({
        rules: {
          FirstName:{
            required:true,
            minlength: 3,
            maxlength:50
          }, 
          LastName:{
            required: true,
            minlength: 3,
            maxlength:50
          }, 
          Address1:{
            minlength: 3,
            maxlength:100
          }, 
          Address2:{
            minlength: 3,
            maxlength:100
          }, 
          upCountry:{
            required:true
          }, 
          pickupCity:{
            required:true
          },
          PIN:{
            minlength:6,
            maxlength:6
          },
          PhoneMobile :{
            number: true,
            minlength:10,
            maxlength:12,
          },
                          
          PhoneResidence :{
            minlength:11,
            maxlength:15
          },
          password :{
            required: true
          },
          Email :{
            required: true,
            maxlength:100
          },
          AdhaarNumber :{
            required: true,
            minlength:12,
            maxlength:12
          },
          SkypeID :{
            minlength:10,
            maxlength:50
          },
          AgencyName :{
            minlength:3,
            maxlength:100
          },
          AgencyAddress1 :{
            minlength:3,
            maxlength:100
          },
          AgencyAddress2 :{
            minlength:3,
            maxlength:100
          },
          AgencyCity :{
            required: true
          },
          AgencyState :{
            required: true
          },
          AgencyCountry :{
            required: true
          },
          AgencyPIN :{
            minlength:6,
            maxlength:6
          },
          AgencyPhoneOffice :{
            minlength:12,
            maxlength:15
          },
          AgencyFAX :{
            minlength:12,
            maxlength:15
          },
          AgencyBusinessType :{
            required: true
          },
          AgencyBusinessYear :{
            required: true
          },
          AgencyBookingVolume :{
            minlength:1,
            maxlength:5
          },
          SecuritizationModeType :{
            required: true
          },
          AgencyPAN :{
            minlength:10,
            maxlength:12
          },
          TDSExemption :{
            required: true,
            decimal: true
          },
          TDSPercentageEx :{
            required: true,
            decimal: true
          },
          References :{
            minlength:5,
            maxlength:150
          },
          Consolidators :{
            minlength:5,
            maxlength:150
          },
          Remarks :{
            minlength:5,
            maxlength:150
          }

          
        },
        messages: {
          FirstName:{
            required: "Please Enter Ur First Name",
            minlength: 'please enter atleast three character',
            maxlength: 'Please do not enter more than 50 words' 
          },
          LastName:{
            required: "Please enter your last name",
            minlength: 'please enter atleast three character',
            maxlength: 'Please do not enter more than 50 words' 
          },
          Address1:{
            minlength: 'please enter atleast three character',
            maxlength: 'Please do not enter more than 50 words'
          },
          Address2:{
            minlength: 'please enter atleast three character',
            maxlength: 'Please do not enter more than 50 words'
          },
          upCountry:{
            required: "Please select the country"
          },
          pickupCity:{
            required: "Please select the city"
          }, 
          PIN:{
            minlength:'Please enter atleast 6 digits',
            maxlength:'Please do not enter more than 6 digits'
          },
          PhoneMobile :{
            minlength:'Please enter atleast 10 digits',
            maxlength:'Please do not enter more than 12 digits'
          }
        },
        submitHandler: function (form) { // for demo
          alert('valid form');
          return false;
        }
      });


    });

.error { color: red; margin: 0; padding: 0; float: inherit}
    label { width: 200px; float: left; margin: 0 130px 0 0;}
        span { display: block; margin: 0 0 5px; font-size: 0.8em; font-weight: bold; color: grey; }
        input { width: 300px; border: 1px solid #000; padding: 10px; }
        select { width: 321px; border: 1px solid #000; padding: 9px; }
        .error{color: red;}
        .headC{
    				text-align: center;
    				font-weight: bold;
    				padding: 15px 0px 15px 0px;
    				font-size: 27px;
    				background: #ff8f35;
    				color: #ffff;
    				
    				background-repeat: no-repeat;
      				background-size: 5px 100px;

    			}

<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/additional-methods.js" type="text/javascript"></script>
    <form name="signup" id="signup" action="SignUpServlet" method="post">
       <div style="padding: 5%;">
          <div class="headC" >Register Here</div>
       </div>
       <div style="padding-left: 25%; padding-top: 1%;">
          <!-- first panel start from here -->
          <div>
             <label for="company">
                <span>Owner's First Name</span>
                <div class="input">
                   <input name="FirstName" type="text" placeholder="First Name"id="FirstName" tabindex="1"
                      style="color:Gray;"/>
                </div>
                <span>Owner's Last Name</span>
                <div class="input">
                   <input name="LastName" type="text" placeholder="Last Name" id="LastName" tabindex="2" 
                      style="color:Gray;" />
                </div>
                <span>Residential Address</span>
                <div class="input">
                   <input name="Address1" type="text" placeholder="Address1" id="Address1" tabindex="3"/>
                </div>
                <br>
                <div class="input">
                   <input name="Address2" type="text" placeholder="Address2" id="Address2" 
                      tabindex="4"/>
                </div>
                <span>Country</span>
                <div class="input">
                   <!-- <?php $countries = get_datafromTable('countries');//  print_r($countries); ?> -->
                   <select name="Country"  id="upCountry" class="input" required="required" tabindex="5">
                      <option value="">------------------------Select Country-------------------------</option>
                      <!-- <? foreach($countries as $countriesNames){ ?> -->
                      <option value="<?php echo $countriesNames['id'];?>"><?php echo $countriesNames['name']; ?></option>
                      <!-- <? } ?> -->
                   </select>
                </div>
                <span>City</span>
                <div class="input">
                   <select class="input"  name="City" id="pickupCity" required="required" tabindex="6">
                      <option value="">First Select Country</option>
                   </select>
                </div>
                <span>Pin</span>
                <div class="input">
                   <input name="PIN" type="text" id="PIN" tabindex="7"/>
                </div>
             </label>
          </div>
          <!--     first panel form second section start from here -->
          <span>Agency Name</span>
          <div class="input">
             <input name="AgencyName" type="text" id="AgencyName" tabindex="15"/>
          </div>
          <span>Agency Address:</span>
          <div class="input">
             <input name="AgencyAddress1" type="text" id="AgencyAddress1" tabindex="16"/>
          </div>
          <br>
          <div class="input">
             <input name="AgencyAddress2" type="text" id="AgencyAddress2" tabindex="17"/>
          </div>
          <span>City</span>
          <div class="input">
             <select class="input"  name="AgencyCity" id="AgencyCity" class="form-control" required="required" tabindex="18">
                <option value="">---------------------------Select City---------------------------</option>
                <option value="60">Vishakhapatnam</option>
                <option value="61">Warangal</option>
                <option value="112">YAMUNA NAGAR</option>
                <option value="Other">Other</option>
             </select>
          </div>
          <span>State/Province</span>
          <div class="input">
             <select class="input" name="AgencyState" id="AgencyState" tabindex="19">
                <option value="">--------------------------Select State--------------------------</option>
                <option value="Other">Other</option>
             </select>
          </div>
          <span>Country</span>
          <div class="input">
             <select class="input" name="AgencyCountry" id="AgencyCountry" tabindex="20">
                <option value="">------------------------Select Country-------------------------</option>
                <option value="AQ">Antarctica</option>
                <option value="AG">Antigua &amp; Barbuda</option>
                <option value="HM">Heard &amp; Mcdonald Islands</option>
                <option value="LA">Lao People&#39;s Democratic Republic</option>
             </select>
          </div>
          <span>Pin</span>
          <div class="input">
             <input name="AgencyPIN" type="text" id="AgencyPIN" tabindex="21"/>
          </div>
          <span>Phone Number(Off)</span>
          <div class="input">
             <input name="AgencyPhoneOffice" type="number" id="AgencyPhoneOffice"tabindex="22"/>
          </div>
          <span>Agency Name</span>
          <div class="input">
             <input name="AgencyName" type="text" id="AgencyName" tabindex="15"/>
          </div>
          <span>Agency Address:</span>
          <div class="input">
             <input name="AgencyAddress1" type="text" id="AgencyAddress1" tabindex="16"/>
          </div>
          <br>
          <div class="input">
             <input name="AgencyAddress2" type="text" id="AgencyAddress2" tabindex="17"/>
          </div>
          <span>City</span>
          <div class="input">
             <select class="input"  name="AgencyCity" id="AgencyCity" class="form-control" required="required" tabindex="18">
                <option value="">---------------------------Select City---------------------------</option>
                <option value="60">Vishakhapatnam</option>
                <option value="61">Warangal</option>
                <option value="112">YAMUNA NAGAR</option>
                <option value="Other">Other</option>
             </select>
          </div>
          <span>State/Province</span>
          <div class="input">
             <select class="input" name="AgencyState" id="AgencyState" tabindex="19">
                <option value="">--------------------------Select State--------------------------</option>
                <option value="Other">Other</option>
             </select>
          </div>
          <span>Country</span>
          <div class="input">
             <select class="input" name="AgencyCountry" id="AgencyCountry" tabindex="20">
                <option value="">------------------------Select Country-------------------------</option>
                <option value="AQ">Antarctica</option>
                <option value="AG">Antigua &amp; Barbuda</option>
                <option value="HM">Heard &amp; Mcdonald Islands</option>
                <option value="LA">Lao People&#39;s Democratic Republic</option>
             </select>
          </div>
          <span>Pin</span>
          <div class="input">
             <input name="AgencyPIN" type="text" id="AgencyPIN" tabindex="21"/>
          </div>
          </label>  
       </div>
       </div>
       <div style="padding-top: 20%; padding-left: 40%;">
          <input type="submit" id="submit" value="submit">
       </div>
    </form>