index.html

﻿<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap.min.css" rel="stylesheet" />
        <script src="jquery-2.2.0.js"></script>
        <title>Contact Form using AngularJS :: Mario Aguiar demo</title>
    </head>
    <body>
        <div>
            <form method="get" role="form" novalidate>
                <legend>Contact</legend>
                <fieldset>
                    <div>
                        <label for="name">Name:</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div>
                        <label for="email">Email:</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div>
                        <label for="messsage">Message:</label>
                        <textarea id="messsage" name="message" required></textarea>
                    </div>
                    <div>
                        <label for="honeypot">I promise I'm not a bot</label>
                        <input type="text" id="honeypot" name="honeypot">
                    </div>
                </fieldset>
                <button type="submit" name="submit" value="submit">Submit</button>
            </form>
        </div>
    </body>

    <script>
        (function($) {
  var contactForm = {
    $form: $( 'form' ),
    init: function() {
      this.$form.on( 'submit', this.validateForm );
    },
    validateField: function( $field ) {
      if ( $field.val() === '' ) {
        return false;
      }
      if ( $field.attr( 'type' ) === 'email' ) {
        var emailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
        if ( ! emailRegex.test( $field.val() ) ) {
          return false;
        }
      }

      return true;
    },
    validateForm: function(e) {
      e.preventDefault();
      var $form = $(this);
      var fields = $form.find( 'input, textarea' ),
          hasError = false;
      fields.each(function() {
        var $field = $(this);
        if ( $field.attr('required') ) {
          if ( ! contactForm.validateField( $field ) ) {
            console.log('error');
            hasError = true;
          }
        }
      });
      if ( ! hasError ) {
        contactForm.processForm( $form );
      } else {
        contactForm.errorFn();
      }
    },
    processForm: function( $form ) {
      var formData = $form.serialize();
      $.ajax({
        url: 'processForm.php',
        type: 'GET',
        dataType: 'json',
        data: formData + '&submit=' + $form.find('button').val(),
      })
      .done( contactForm.successFn )
      .fail( contactForm.errorFn );
    },
    successFn: function(data) {
      if ( data.success === true ) {
        contactForm.$form.prepend('<p>Thanks for getting in touch!</p>');
      } else {
        contactForm.errorFn();
      }
    },
    errorFn: function() {
      contactForm.$form.prepend('<p>Something wrong happened!, please try again.</p>');
    }
  }

  contactForm.init();
})(jQuery);
    </script>
</html>