To validate and connvert entered phone number in a form

Question

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> 

Answer 1

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!

Answer 2

if (!(this.isNull)) {

显然，使其简短而简单，例如：

if (this) {