Q:

To validate and connvert entered phone number in a form

I am working on an HTML form which has 4 fields as below
Name
Email
Phone Number
Message

The field for phone number should accept 10 digits. It change/accept of the format (xxx) xxx-xxxx when i click on the Message field. 
I have written the function for javascript to do so but the number is not getting changed when i click on the message field. The code is below
It would be a great help if someone could help me out with this. Thanks in advance!
function PhoneValidation(phone) {
  if (!(this.isNull)) {

    var str = this.rawValue;

    var regExp = /^\d{10}$/;

    if (regExp.test(str)) {

      this.rawValue = "(" + str.substr(0, 3) + ") " + str.substr(3, 3) + "-" + str.substr(6, 4);

    } else {

      regExp = /^[1-9]\d{2}\s\d{3}\s\d{4}$/;

      if (regExp.test(str)) {

        this.rawValue = "(" + str.substr(0, 3) + ") " + str.substr(4, 3) + "-" + str.substr(8, 4);

      } else {

        regExp = /^\([1-9]\d{2}\)\s?\d{3}\-\d{4}$/;

        if (!(regExp.test(str))) {

          xfa.host.messageBox("Please enter the telephone number in the format '(999) 999-9999'.");

          this.rawValue = null;

          xfa.host.setFocus(this);

        }

      }

    }

  }
}

And HTML below:
<form id="contact-form" class="contact-form" method="post" action="">
    <div class="result"></div>
    <input type="text" name="contact[name]" id="name" placeholder="Name *">
    <input type="text" name="contact[email]" id="email" placeholder="E-mail *">
    <input type="text" name="phone" id="phone" placeholder="Phone" onChange="PhoneValidation(this)" ;>
    <textarea cols="5" rows="5" name="contact[message]" id="message" placeholder="Message *"></textarea>
    <input type="submit" class="btn-dark" value="SEND">
</form> 

A:

in your validate function this = window, or something else so I have no idea what will !this.isNull actually do.
You may change it to something like
function PhoneValidation(phone) {
   if(phone.value) {
         // set up the phone.value here
   }
}
// bind the change event as you did.
<input type="text" name="phone" id="phone"  placeholder="Phone" onChange="PhoneValidation(this)";>

EDIT  The code above is just the idea, please note that inside PhoneValidation in your case this = window. You have passed phone so try to use it, you can take the demo here http://jsfiddle.net/7qjz2/. As a summary
window.PhoneValidation = function(phone)
// cause I don't know where you put this js, so let bind it to window.

Next in side function, rawValue is undefined so use phone.value instead
If you can't pass the condition, set the html for your message div. by
document.getElementById("result").innerHTML = "Whatever you want"

That's all. Hope this help!

