JavaScript Form Validation with email , phone number and name.

Hi, today we are going to see how to make a form validation using javascript, it includes email validation, name validation, max-min value validation, string length validation and also phone number validation.

JavaScript Form Validation

We are going to use the set custom message as the required field use to show and for that we will use javascript function setCustomValidity() by the id of the field

and we will make the field focused and also will make the field required dynamically using javascript function focus() and required by the id of the field.

Now start step by step

First, create an HTML document and form with various field with a unique id

Now To validate a range of value use the below js code

if (amount.value.length == 0 || parseInt(amount.value)<500 || parseInt(amount.value)>2500) {
    textHint.innerHTML = "
Amount must be between 500 - 2500
";
    amount.focus();
    amount.required=true;
    amount.setCustomValidity("Please Fill When Do you Need The Funds");
    return false;
}else{
textHint.innerHTML = "";
    amount.required=false;
    amount.setCustomValidity("");
}

To validate The name as there should be only alfa value with space and should have not any special char use the below code

if (full_name.value.length < 2 || !/^[A-Za-z\s]+$/.test(full_name.value)) { 
    textHint.innerHTML = "
Please Fill Your Name Properly
";
    full_name.focus()
    full_name.required=true;
    full_name.setCustomValidity("Please Fill Your Name Properly");
    return false;
}else{
textHint.innerHTML = "";
    full_name.required=false;
    full_name.setCustomValidity("");
}

To validate string length use the below code

if (company_name.value.length == 0) { 
    textHint.innerHTML = "
Please Fill Your Company Name
";
    company_name.focus()
    company_name.required=true;
    company_name.setCustomValidity("Please Fill Your Company Name");
    return false;
}else{
textHint.innerHTML = "";
    company_name.focus()
    company_name.required=false;
    company_name.setCustomValidity("");
}

To validate Phone number with 0 of country code as prefix use below javascript code

if (!/^\+?([0]{1})\)?([0-9]{9,10})$/.test(phone_no.value) && !/^\+?([91]{2})\)?([0-9]{9,10})$/.test(phone_no.value) ) { 
    textHint.innerHTML = "
Please Fill Your Ph No With +91 Or 0
";
    phone_no.focus()
    phone_no.required=true;
    phone_no.setCustomValidity("Please Fill Your Ph No With +91 Or 0");
    return false;
}else{
textHint.innerHTML = "";
    phone_no.focus()
   phone_no.required=false;
    phone_no.setCustomValidity("");
}

To validate an email address using below javascript code

if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value)) { 
    textHint.innerHTML = "
Please Fill Your Email Id Properly
";
    email.focus()
   email.required=true;
    email.setCustomValidity("Please Fill Your Email Id Properly");
    return false;
}else{
textHint.innerHTML = "";
    email.focus()
    email.required=true;
    email.setCustomValidity("");
}

Now here is the full javascript code to validate a form with phone number with country code and email and, name as there is only character no special or number type character.

now get the below code or try it yourself to test the contact number validation with 0 or country code before the contact number and email address validation and numerical range validation and name field validation where will not be any special character or number, there will be the only character that caps a to z or small a to z and space.

Try It Yourself

In this post we have learned how to make a form validation using javascript, it includes email validation, name validation, max-min value validation, string length validation and also phone number validation. Please comment below to make the sitter better and more useful.

Thanks for Reading