tesshsu/Addmethod.js

## Addmethod.js
$.validator.addMethod( "forValidPhone", function( value, element ) {
	return this.optional( element ) || /^\((\d{3})\)[- ]?(\d{3})[- ]?(\d{4})$/i.test( value );
}, "please enter the correct phone format" );

$.validator.addMethod( "forValidSsn", function( value, element ) {
	return this.optional( element ) || /^(\d{3}-\d{2}-\d{4})$/i.test( value );
}, "please enter the correct ssn format" );

## demo.png

      
    Raw
  

              demo.png
            
          
## form.js
$("#form").validate({
	errorElement: "span",
    errorClass: "help-block",
    validClass: "success",
    rules: {
      FirstName: {
        required: true,
        lettersonly: true,
        minlength: 1,
        maxlength: 50
      },
      LastName: {
        required: true,
        lettersonly: true,
        minlength: 1,
        maxlength: 50
      },
      PhoneNumber: {
        required: true,
        forValidPhone: true,
        minlength: 2,
        maxlength: 50
      },
      Email: {
        required: true,
        email: true
      },
	  SSN: {
        required: true,
        forValidSsn: true
      },
	  Age: {
        required: true,
      },
	  SubmitBy: {
        required: true,
      }
    },
    highlight: function(element, errorClass, validClass) {
	  $(element).parent().removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).parent().removeClass('has-error').addClass('has-success');
    },
	submitHandler: function(data) {
		$.ajax({
          type: 'POST',
		  dataType : 'json',
		  url: 'http://web01.concentrus.com/DevTest/CustomerProfile/Add',
		  data: {
			"firstName": $('#firstname').val(),
			"lastName": $('#lastname').val(),
			"phoneNumber": $('#phone').val(),
			"ssn": $('#ssn').val(),
			"age": $('#age').val(),
			"email": $('#email').val(),
			"SubmitBy":$('#submitby').val()
		  },
		  success: function (data) {
			$('form').hide();
			var content= '<h1>' + data + '</h1>';
			$('body').html(content);
		  },
		  error: function(jqXHR, textStatus, errorThrown ){
			$('form').show();
			var content= '<h1>' + textStatus + '</h1>';
			$('body').append(content);
		  }
		});
	 }
});

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>validate + Ajax post demo Tess</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body{
	  padding: 20px;
	}
	form{
	  max-width: 70%;
	  text-aline: center;
	  padding: 20px;
	  border: 1px solid #eee;
	  border-radius: 10px;
	}
	.disabled {
	  background-color: #666;
	}
  </style>
</head>
<body>
  <h1>validate + Ajax post demo Tess</h1>
  <h1 class="msgWrapper hide"></h1>
  <form id="form" method="POST" >
	  <div class="form-group">
		<label for="firstname">* FirstName</label>
		<input type="text" name="FirstName" class="form-control" id="firstname" value="" placeholder="firstname">
	  </div>
	  <div class="form-group">
		<label for="lastname">* Last Name</label>
		<input type="text" name="LastName" class="form-control" id="lastname" value="" placeholder="lastname">
	  </div>
	  <div class="form-group">
		<label for="phone">* Phone Number</label>
		<input type="text" name="PhoneNumber" class="form-control" id="phone" value="" placeholder="(123)456-7890">
	  </div>
	  <div class="form-group">
		<label for="email">* Email</label>
		<input type="text" name="Email" class="form-control" id="email" value="" placeholder="test@test.com">
	  </div>
	  <div class="form-group">
		<label for="ssn">* SSN</label>
		<input type="text" name="SSN" class="form-control" id="ssn" value="" placeholder="333-00-1111">
	  </div>
	  <div class="form-group">
		<label for="age">* Age</label>
		<input type="number" name="Age" class="form-control" id="age" value="" placeholder="30">
	  </div>
	  <div class="form-group">
		<label for="submitby">* SubmitBy</label>
		<input type="text" name="SubmitBy" class="form-control" id="submitby" value="" placeholder="">
	  </div>
	  <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</body>
<script type="text/javascript" src="src/scripts/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="src/scripts/jquery.validate.js"></script>
<script type="text/javascript" src="src/scripts/jquery.validate-additional-methods.js"></script>
<script type="text/javascript" src="src/scripts/valide_method.js"></script>
<script type="text/javascript" src="src/scripts/form.js"></script>
</html>
	$.validator.addMethod( "forValidPhone", function( value, element ) {
	return this.optional( element ) \|\| /^\((\d{3})\)[- ]?(\d{3})[- ]?(\d{4})$/i.test( value );
	}, "please enter the correct phone format" );

	$.validator.addMethod( "forValidSsn", function( value, element ) {
	return this.optional( element ) \|\| /^(\d{3}-\d{2}-\d{4})$/i.test( value );
	}, "please enter the correct ssn format" );
	$("#form").validate({
	errorElement: "span",
	errorClass: "help-block",
	validClass: "success",
	rules: {
	FirstName: {
	required: true,
	lettersonly: true,
	minlength: 1,
	maxlength: 50
	},
	LastName: {
	required: true,
	lettersonly: true,
	minlength: 1,
	maxlength: 50
	},
	PhoneNumber: {
	required: true,
	forValidPhone: true,
	minlength: 2,
	maxlength: 50
	},
	Email: {
	required: true,
	email: true
	},
	SSN: {
	required: true,
	forValidSsn: true
	},
	Age: {
	required: true,
	},
	SubmitBy: {
	required: true,
	}
	},
	highlight: function(element, errorClass, validClass) {
	$(element).parent().removeClass('has-success').addClass('has-error');
	},
	unhighlight: function(element, errorClass, validClass) {
	$(element).parent().removeClass('has-error').addClass('has-success');
	},
	submitHandler: function(data) {
	$.ajax({
	type: 'POST',
	dataType : 'json',
	url: 'http://web01.concentrus.com/DevTest/CustomerProfile/Add',
	data: {
	"firstName": $('#firstname').val(),
	"lastName": $('#lastname').val(),
	"phoneNumber": $('#phone').val(),
	"ssn": $('#ssn').val(),
	"age": $('#age').val(),
	"email": $('#email').val(),
	"SubmitBy":$('#submitby').val()
	},
	success: function (data) {
	$('form').hide();
	var content= '<h1>' + data + '</h1>';
	$('body').html(content);
	},
	error: function(jqXHR, textStatus, errorThrown ){
	$('form').show();
	var content= '<h1>' + textStatus + '</h1>';
	$('body').append(content);
	}
	});
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>validate + Ajax post demo Tess</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<style>
	body{
	padding: 20px;
	}
	form{
	max-width: 70%;
	text-aline: center;
	padding: 20px;
	border: 1px solid #eee;
	border-radius: 10px;
	}
	.disabled {
	background-color: #666;
	}
	</style>
	</head>
	<body>
	<h1>validate + Ajax post demo Tess</h1>
	<h1 class="msgWrapper hide"></h1>
	<form id="form" method="POST" >
	<div class="form-group">
	<label for="firstname">* FirstName</label>
	<input type="text" name="FirstName" class="form-control" id="firstname" value="" placeholder="firstname">
	</div>
	<div class="form-group">
	<label for="lastname">* Last Name</label>
	<input type="text" name="LastName" class="form-control" id="lastname" value="" placeholder="lastname">
	</div>
	<div class="form-group">
	<label for="phone">* Phone Number</label>
	<input type="text" name="PhoneNumber" class="form-control" id="phone" value="" placeholder="(123)456-7890">
	</div>
	<div class="form-group">
	<label for="email">* Email</label>
	<input type="text" name="Email" class="form-control" id="email" value="" placeholder="test@test.com">
	</div>
	<div class="form-group">
	<label for="ssn">* SSN</label>
	<input type="text" name="SSN" class="form-control" id="ssn" value="" placeholder="333-00-1111">
	</div>
	<div class="form-group">
	<label for="age">* Age</label>
	<input type="number" name="Age" class="form-control" id="age" value="" placeholder="30">
	</div>
	<div class="form-group">
	<label for="submitby">* SubmitBy</label>
	<input type="text" name="SubmitBy" class="form-control" id="submitby" value="" placeholder="">
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
	</form>
	</body>
	<script type="text/javascript" src="src/scripts/jquery-2.2.4.min.js"></script>
	<script type="text/javascript" src="src/scripts/jquery.validate.js"></script>
	<script type="text/javascript" src="src/scripts/jquery.validate-additional-methods.js"></script>
	<script type="text/javascript" src="src/scripts/valide_method.js"></script>
	<script type="text/javascript" src="src/scripts/form.js"></script>
	</html>