0

I want to validate my form now, and I wrote some code, it's working perfectly for length constraints but I want to use Regular Expression to filter the values of each element.

I found from a forum, these Regular Expressions:

  • for Full Name: var regex = /^[a-zA-Z ]$/;

  • for Phone: var regexPhone= /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;

I guess the HTML5 (input:type email) is enough for email validation

Also I want to do this with the name, that when I type the full name, the first letters change to uppercase letters. For example--> input="john smith", changes to "John Smith".

This is my code:

function validateForm() {
for (var i = 0; i < document.forms[0].elements.length; i++) {
    var pedio = document.forms[0].elements[i];
 if(pedio.id.indexOf("Name")!=-1){
  if (pedio.value.length < 5 || pedio.value.length > 35) {
   alert("Full Name must be 5-35 character long");
            pedio.focus();
            pedio.style.backgroundColor = "#997379";
            return false;
  }
 }
 
    if ((pedio.id.indexOf("Phone") != -1) && (isNaN(pedio.value))) {
        alert("Phone is must contain only numbers");
        pedio.focus();
        pedio.style.backgroundColor = "#997379";
        return false;
    }
 
 if(pedio.id.indexOf("Phone")!=-1){
  if (pedio.value.length!=10) {
   alert("Phone must be 10 numbers");
            pedio.focus();
            pedio.style.backgroundColor = "#997379";
            return false;
   }
  }
 }
}
/* No CSS */
<h1 class="Title">Sign Up</h1>
<div>
 <form method="post" onsubmit="return validateForm()">
  <input type="text" id="Name" name="yourname" placeholder="*Full Name" autocomplete="off" required>
  <input type="email" id="Email" name="youremail" placeholder="*E-Mail"autocomplete="off" required>
  <input type="tel" id="Phone" name="yourphone" placeholder="*Phone" autocomplete="off" required>
  <input type="password" id="Password" name="yourpassword" placeholder="*Password" autocomplete="off" required>
  <p class="signup"> The fields with * are required!<br>
  -If you have an account, <a class="signup" href="reservation.php">log in</a> now-</p>

  <keygen name="security" style="display:none;">
  <input type="submit" value="Register">

    </form>
</div>
halfer
  • 19,824
  • 17
  • 99
  • 186
Haris Papadakis
  • 89
  • 1
  • 2
  • 13

2 Answers2

0

Hint:

The RegExp object has a method test which when given a string argument returns true if there was at least one match in the str or false. MDN Documentation

Used as /regexp/.test(str). You already have code that tests for length. You want to test for the length AND for this regex.

When you want to capitalize the first letter of each word, that is called Title Case. There's an excellent answer here for that part of your question

Peeyush Kushwaha
  • 3,453
  • 8
  • 35
  • 69
0

Option 1: You can use text-transform: capitalize CSS property which will automatically do the task of converting a name from john cena to John Cena.

Check the example below in the CSS

Option 2: I have added a new input called Nick name which uses javascript to do the same task.

I have used keyup handler to capture the all key input event so that we can execute a piece of code which will do the job on capitalizing the name.

The result is simple string manipulation which splits the name with <space-character> and converts the first character to uppercase and joins the same with rest of the string.

document.addEventListener("DOMContentLoaded", function() {
  document.querySelector("#NickName").addEventListener("keyup", capitalizeName);
});

function capitalizeName() {
  if (!this.value) return;
  var aNewName = this.value.split(" ").map(function(name) {
    return name.charAt(0).toUpperCase() + name.substring(1);
  });
  this.value = aNewName.join(" ");
}

function validateForm() {
  for (var i = 0; i < document.forms[0].elements.length; i++) {
    var pedio = document.forms[0].elements[i];
    if (pedio.id.indexOf("Name") != -1) {
      if (pedio.value.length < 5 || pedio.value.length > 35) {
        alert("Full Name must be 5-35 character long");
        pedio.focus();
        pedio.style.backgroundColor = "#997379";
        return false;
      }
    }

    if ((pedio.id.indexOf("Phone") != -1) && (isNaN(pedio.value))) {
      alert("Phone is must contain only numbers");
      pedio.focus();
      pedio.style.backgroundColor = "#997379";
      return false;
    }

    if (pedio.id.indexOf("Phone") != -1) {
      if (pedio.value.length != 10) {
        alert("Phone must be 10 numbers");
        pedio.focus();
        pedio.style.backgroundColor = "#997379";
        return false;
      }
    }
  }
}
/* No CSS */

#Name {
  text-transform: capitalize;
}
<h1 class="Title">Sign Up</h1>
<div>
  <form method="post" onsubmit="return validateForm()">
    <input type="text" id="Name" name="yourname" placeholder="*Full Name" autocomplete="off" required>
    <input type="text" id="NickName" name="NickName" placeholder="*Nick name" autocomplete="off" required>
    <input type="email" id="Email" name="youremail" placeholder="*E-Mail" autocomplete="off" required>
    <input type="tel" id="Phone" name="yourphone" placeholder="*Phone" autocomplete="off" required>
    <input type="password" id="Password" name="yourpassword" placeholder="*Password" autocomplete="off" required>
    <p class="signup"> The fields with * are required!<br> -If you have an account, <a class="signup" href="reservation.php">log in</a> now-</p>

    <keygen name="security" style="display:none;">
    <input type="submit" value="Register">

  </form>
</div>
Sivasankar
  • 753
  • 8
  • 22