Design custom form in CSS, JavaScript and PHP tutorial Pt3

Great to see you back! Previously we took care about placeholders, required and focus attributes by providing additional JavaScript fallbacks for the input fields. Today we will finish The JavaScript side by fixing possible problems with input fields that can appear in case when browser doesn’t support form validation included in HTML5. Without further ado, let’s code …

In order to create a bulletproof form we will use something called regexp. If you don’t have any previous experiences with it, don’t worry about that now. Since this is more advanced and difficult topic to understand and it would take too much time, I will explain it in separate post in the future.

The resources for this part remain the same as in previous two. Below are links to Modernizr library we will use to test supported features, live demo on Codepen and also Github repository with all the codes available for you.

Resources:

Modernizr:

http://modernizr.com/

Codepen live demo:

https://codepen.io/d3v3r0/pen/jcxbL

GitHub repository:

https://github.com/d3v3r0/Custom-form-in-CSS-JavaScript-and-PHP

Because we covered input for name by checking for length, we will move straight to input for email and work on that one. First we will select the email input via class we created in previous part called “mail” and then watch for “onblur” event. Every time this event will be triggered, a new function will be run.

JavaScript:

mail.onblur = function() {};

This function will contain new variable we will call mailTest with regexp store in it. This regexp code will be used to check for value (characters) provided by users. To achieve this let’s create new if statement. This statement will check if either the email field is empty or if it matches the regexp code. For case of invalid value (wrong email address) a pop-up window will be displayed. To find out what the value of input is, we will use “mail” variable with JavaScript “value” property.

JavaScript:

// variable with regexp code
var mailTest = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
if (mail.value == '' || !mailTest.test(mail.value)) {
 alert('Please enter valid email address.');
};

Side note: I guess that for those of you who see regexp for the first time, it is similar to trip to country with different language and even alphabet. Trust me, this happens all the times and even more advanced programmers tend to have problems with it at first. However, if you want to progress to high level and pick yourself out of the crowd, regexp is necessary for you to learn. To make it easier we will explore this topic in detail in the future post, so you will understand every detail. Now back to our form …

OK, email is fixed for the most cases. I said most because there is always some way to break through even the most solid type of security. Now it is time to focus on field for phone number. First let’s use onblur event again this time on variable called phone which is connected to input field for phone number.

JavaScript:

phone.onblur = function() {};

Next let’s create new variable called phoneTest to store the regexp code for checking for valid phone number. On the next line write the if statement from email validation only with changed variable names. Again we will check for the value of phone input by using value property.

JavaScript:

// regexp code for phone validation
var phoneTest = /^(?[0-9]{3}(-|)) ?[0-9]{3}-[0-9]{4}$/;
if (phone.value == '' || !phoneTest.test(phone.value)) {
 alert('Please enter valid phone.');
}

It is important to note here that there might be some issues with controlling phone number because different countries use different codes and phone formats. The regexp solution above will allow user to use 111-235-6598, (092)235-4852 and (072) 729-8153 phone formats. Different approach can be allowing to submit the form only if numbers are provided. To do this you can use onblur event with new function binded to phone field. This function will contain new if statement that will check if the type of value is number and if that value is integer. In case of invalid value will be displayed pop-up window with a message.

JavaScript:

phone.onblur = function() {
 if (!(typeof phone.value == 'number' && phone.value % 1 === 0)) {
 alert('Please enter valid phone.');
 }
}

You can also use regexp for checking for integers.

JavaScript:

var phoneTest1 = /^d+$/;
if (phone.value == '' || !phoneTest1.test(phone.value)) {
 alert('Only numbers are allowed.');
}

Whole JavaScript code:

// Running when page is loaded
window.onload = function() {
 if (!Modernizr.input.autofocus) {
  var inputs = document.getElementsByTagName('input');
  inputs[0].focus();
 };
 if (Modernizr.input.placeholder) {
  var labels = document.getElementsByTagName('label');
  for (var i = 0, j = labels.length; i < j; i++) {
   labels[i].classList.add('js-hidden');
  };
 };
 // If 'required' attribute is not supported
 if (!Modernizr.input.required) {
  var form = document.getElementById('js-form');
  var name = document.getElementById('js-name');
  var mail = document.getElementById('js-email');
  var phone = document.getElementById('js-tel');
  if (name.value.length < 1 || mail.value.length < 1 || phone.value.length < 1) {
   form.onsubmit = function() {
   return false;
  };
 };
  form.onchange = function() {
   if (name.value.length > 1 && mail.value.length > 1 && phone.value.length > 1) {
    form.onsubmit = function() {
    return true;
   };
  };
 };
 // fallback for input validation
 mail.onblur = function() {
  var mailTest = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
  if (mail.value == '' || !mailTest.test(mail.value)) {
   alert('Please enter valid email address.');
  }
 };
 phone.onblur = function() {
  var phoneTest = /^(?[0-9]{3}(-|)) ?[0-9]{3}-[0-9]{4}$/;
  if (phone.value == '' || !phoneTest.test(phone.value)) {
   alert('Please enter valid phone.');
  }
 };
 };
};

Summary

With this we have finished the JavaScript part of this form tutorial. So the only thing that remains is creating PHP code necessary for send the form to our mailbox, which will be subject of the last part. Until then see Ya.

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal