lemeck

Javascript validation

Aug 9th, 2013
173
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  $(document).ready(function(){
  2.         $('#send_message').click(function(e){
  3.            
  4.             //Stop form submission & check the validation
  5.             e.preventDefault();
  6.            
  7.             // Variable declaration
  8.             var error = false;
  9.             var lname = $('#lname').val();
  10.             var fname = $('#fname').val();
  11.             var mname = $('#mname').val();
  12.             var alias = $('#alias').val();
  13.             var place = $('#place').val();
  14.             var address = $('#address').val();
  15.             var nationality = $('#nationality').val();
  16.             var age = $('#age').val();
  17.             var complexion = $('#complexion').val();
  18.             var height = $('#height').val();
  19.             var weight = $('#weight').val();
  20.             var build = $('#build').val();
  21.             var haircolor = $('#haircolor').val();
  22.             var pecularities = $('#pecularities').val();
  23.             var other = $('#other').val();
  24.             var clname = $('#clname').val();
  25.             var cfname = $('#cfname').val();
  26.             var cmname = $('#cmname').val();
  27.             var caddress = $('#caddress').val();
  28.            
  29.             var email = $('#email').val();
  30.             var subject = $('#subject').val();
  31.             var message = $('#message').val();
  32.            
  33.             // Form field validation
  34.             if(lname.length == 0){
  35.                 var error = true;
  36.                 $('#lname_null').fadeIn(500);
  37.             }else{
  38.                 $('#lname_null').fadeOut(500);
  39.             }
  40.             if(!lname.match(/^[a-zA-Z]*$/)){
  41.                 var error = true;
  42.                 $('#lname_error').fadeIn(500);
  43.             }else{
  44.                 $('#lname_error').fadeOut(500);
  45.             }
  46.             if(fname.length == 0){
  47.                 var error = true;
  48.                 $('#fname_null').fadeIn(500);
  49.             }else{
  50.                 $('#fname_null').fadeOut(500);
  51.             }
  52.             if(!fname.match(/^[a-zA-Z]*$/)){
  53.                 var error = true;
  54.                 $('#fname_error').fadeIn(500);
  55.             }else{
  56.                 $('#fname_error').fadeOut(500);
  57.             }
  58.             if(mname.length == 0){
  59.                 var error = true;
  60.                 $('#mname_null').fadeIn(500);
  61.             }else{
  62.                 $('#mname_null').fadeOut(500);
  63.             }
  64.             if(!mname.match(/^[a-zA-Z]*$/)){
  65.                 var error = true;
  66.                 $('#mname_error').fadeIn(500);
  67.             }else{
  68.                 $('#mname_error').fadeOut(500);
  69.             }
  70.             if(alias.length == 0){
  71.                 var error = true;
  72.                 $('#alias_null').fadeIn(500);
  73.             }else{
  74.                 $('#alias_null').fadeOut(500);
  75.             }
  76.             if(!alias.match(/^[a-zA-Z]*$/)){
  77.                 var error = true;
  78.                 $('#alias_error').fadeIn(500);
  79.             }else{
  80.                 $('#alias_error').fadeOut(500);
  81.             }
  82.             if(place.length == 0){
  83.                 var error = true;
  84.                 $('#place_null').fadeIn(500);
  85.             }else{
  86.                 $('#place_null').fadeOut(500);
  87.             }
  88.             if(!place.match(/^[a-zA-Z]*$/)){
  89.                 var error = true;
  90.                 $('#place_error').fadeIn(500);
  91.             }else{
  92.                 $('#place_error').fadeOut(500);
  93.             }
  94.             if(address.length == 0){
  95.                 var error = true;
  96.                 $('#address_null').fadeIn(500);
  97.             }else{
  98.                 $('#address_null').fadeOut(500);
  99.             }
  100.             if(!address.match(/^[a-zA-Z0-9 #-]*$/)){
  101.                 var error = true;
  102.                 $('#address_error').fadeIn(500);
  103.             }else{
  104.                 $('#address_error').fadeOut(500);
  105.             }
  106.             if(nationality.length == 0){
  107.                 var error = true;
  108.                 $('#nationality_null').fadeIn(500);
  109.             }else{
  110.                 $('#nationality_null').fadeOut(500);
  111.             }
  112.             if(!nationality.match(/^[a-zA-Z]*$/)){
  113.                 var error = true;
  114.                 $('#nationality_error').fadeIn(500);
  115.             }else{
  116.                 $('#nationality_error').fadeOut(500);
  117.             }
  118.             if(age.length == 0){
  119.                 var error = true;
  120.                 $('#age_null').fadeIn(500);
  121.             }else{
  122.                 $('#age_null').fadeOut(500);
  123.             }
  124.             if(!age.match(/^[0-9]*$/)){
  125.                 var error = true;
  126.                 $('#age_error').fadeIn(500);
  127.             }else{
  128.                 $('#age_error').fadeOut(500);
  129.             }
  130.             if(complexion.length == 0){
  131.                 var error = true;
  132.                 $('#complexion_null').fadeIn(500);
  133.             }else{
  134.                 $('#complexion_null').fadeOut(500);
  135.             }
  136.             if(!complexion.match(/^[a-zA-Z]*$/)){
  137.                 var error = true;
  138.                 $('#complexion_error').fadeIn(500);
  139.             }else{
  140.                 $('#complexion_error').fadeOut(500);
  141.             }
  142.             if(height.length == 0){
  143.                 var error = true;
  144.                 $('#height_null').fadeIn(500);
  145.             }else{
  146.                 $('#height_null').fadeOut(500);
  147.             }
  148.             if(!height.match(/^[a-zA-Z]*$/)){
  149.                 var error = true;
  150.                 $('#height_error').fadeIn(500);
  151.             }else{
  152.                 $('#height_error').fadeOut(500);
  153.             }
  154.             if(weight.length == 0){
  155.                 var error = true;
  156.                 $('#weight_null').fadeIn(500);
  157.             }else{
  158.                 $('#weight_null').fadeOut(500);
  159.             }
  160.             if(!weight.match(/^[a-zA-Z]*$/)){
  161.                 var error = true;
  162.                 $('#weight_error').fadeIn(500);
  163.             }else{
  164.                 $('#weight_error').fadeOut(500);
  165.             }
  166.             if(build.length == 0){
  167.                 var error = true;
  168.                 $('#build_null').fadeIn(500);
  169.             }else{
  170.                 $('#build_null').fadeOut(500);
  171.             }
  172.             if(!build.match(/^[a-zA-Z]*$/)){
  173.                 var error = true;
  174.                 $('#build_error').fadeIn(500);
  175.             }else{
  176.                 $('#build_error').fadeOut(500);
  177.             }
  178.             if(haircolor.length == 0){
  179.                 var error = true;
  180.                 $('#haircolor_null').fadeIn(500);
  181.             }else{
  182.                 $('#haircolor_null').fadeOut(500);
  183.             }
  184.             if(!haircolor.match(/^[a-zA-Z]*$/)){
  185.                 var error = true;
  186.                 $('#haircolor_error').fadeIn(500);
  187.             }else{
  188.                 $('#haircolor_error').fadeOut(500);
  189.             }
  190.             if(pecularities.length == 0){
  191.                 var error = true;
  192.                 $('#pecularities_null').fadeIn(500);
  193.             }else{
  194.                 $('#pecularities_null').fadeOut(500);
  195.             }
  196.             if(!pecularities.match(/^[a-zA-Z]*$/)){
  197.                 var error = true;
  198.                 $('#pecularities_error').fadeIn(500);
  199.             }else{
  200.                 $('#pecularities_error').fadeOut(500);
  201.             }
  202.             if(other.length == 0){
  203.                 var error = true;
  204.                 $('#other_null').fadeIn(500);
  205.             }else{
  206.                 $('#other_null').fadeOut(500);
  207.             }
  208.             if(!other.match(/^[a-zA-Z]*$/)){
  209.                 var error = true;
  210.                 $('#other_error').fadeIn(500);
  211.             }else{
  212.                 $('#other_error').fadeOut(500);
  213.             }
  214.             if(clname.length == 0){
  215.                 var error = true;
  216.                 $('#clname_null').fadeIn(500);
  217.             }else{
  218.                 $('#clname_null').fadeOut(500);
  219.             }
  220.             if(!clname.match(/^[a-zA-Z]*$/)){
  221.                 var error = true;
  222.                 $('#clname_error').fadeIn(500);
  223.             }else{
  224.                 $('#clname_error').fadeOut(500);
  225.             }
  226.             if(cfname.length == 0){
  227.                 var error = true;
  228.                 $('#cfname_null').fadeIn(500);
  229.             }else{
  230.                 $('#cfname_null').fadeOut(500);
  231.             }
  232.             if(!cfname.match(/^[a-zA-Z]*$/)){
  233.                 var error = true;
  234.                 $('#cfname_error').fadeIn(500);
  235.             }else{
  236.                 $('#cfname_error').fadeOut(500);
  237.             }
  238.             if(cmname.length == 0){
  239.                 var error = true;
  240.                 $('#cmname_null').fadeIn(500);
  241.             }else{
  242.                 $('#cmname_null').fadeOut(500);
  243.             }
  244.             if(!cmname.match(/^[a-zA-Z]*$/)){
  245.                 var error = true;
  246.                 $('#cmname_error').fadeIn(500);
  247.             }else{
  248.                 $('#cmname_error').fadeOut(500);
  249.             }
  250.             if(caddress.length == 0){
  251.                 var error = true;
  252.                 $('#caddress_null').fadeIn(500);
  253.             }else{
  254.                 $('#caddress_null').fadeOut(500);
  255.             }
  256.             if(!caddress.match(/^[a-zA-Z0-9 #-]*$/)){
  257.                 var error = true;
  258.                 $('#caddress_error').fadeIn(500);
  259.             }else{
  260.                 $('#caddress_error').fadeOut(500);
  261.             }
  262.             if(email.length == 0 || email.indexOf('@') == '-1'){
  263.                 var error = true;
  264.                 $('#email_error').fadeIn(500);
  265.             }else{
  266.                 $('#email_error').fadeOut(500);
  267.             }
  268.             if(subject.length == 0){
  269.                 var error = true;
  270.                 $('#subject_error').fadeIn(500);
  271.             }else{
  272.                 $('#subject_error').fadeOut(500);
  273.             }
  274.             if(message.length == 0){
  275.                 var error = true;
  276.                 $('#message_error').fadeIn(500);
  277.             }else{
  278.                 $('#message_error').fadeOut(500);
  279.             }
  280.            
  281.             // If there is no validation error, next to process the mail function
  282.             if(error == false){
  283.                // Disable submit button just after the form processed 1st time successfully.
  284.                 $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
  285.                
  286.                 /* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/
  287.                 $.post("email.php", $("#contact_form").serialize(),function(result){
  288.                     //Check the result set from email.php file.
  289.                     if(result == 'sent'){
  290.                         //If the email is sent successfully, remove the submit button
  291.                          $('#submit').remove();
  292.                         //Display the success message
  293.                         $('#mail_success').fadeIn(500);
  294.                     }else{
  295.                         //Display the error message
  296.                         $('#mail_fail').fadeIn(500);
  297.                         // Enable the submit button again
  298.                         $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
  299.                     }
  300.                 });
  301.             }
  302.         });    
  303.     });
Advertisement
Add Comment
Please, Sign In to add comment