Tags : JavaScript Intro



Regex

Go to regex101.com to test your regex.

regex.js

function validateName(name){
  var nameRegex = /^[a-zA-Z\s]*$/;
  return nameRegex.test(name);
}

function disabledButton(){
  $("button#form-submit").attr("disabled", "disabled");
}



$(document).ready(function(){
  disabledButton();

  $("form").on("keyup", "input#name", function(){
    var nameInput = $(this).val();

    if(validateName(nameInput)){
      console.log("button enabled");
      $("button#form-submit").removeAttr("disabled");
    } else {
      disabledButton();
    }
  })

  $("form").on("submit", function(event){
    event.preventDefault();

    alert("your form is now working");
  })
})
<!DOCTYPE html>
<html>
  <head>
    <script src="scripts/jquery-1.11.3.js"></script>
    <script src="scripts/regex.js"></script>
  </head>
  <body>
    <form id="regex-example">
      <label for="name">Name</label>
      <input id="name" type="text">
      <button id="form-submit" type="submit">Submit</button>
    </form>
    <span id="errors"></span>
  </body>
</html>

Try the following:

  • Build an address book.
  • User should be able to add first name, middle inital, last name, email(business, personal), phone(home, mobile, business), street address, unit number, city, country, zipcode and comments
  • Each input should be validated with a proper regex.
  • User should be able to delete a contact from the address book.
  • User should be able edit a contact.