Home » %%sitename%% » Try it yourself – JavaScript Form Validation with email , phone number and name.

Try it yourself – JavaScript Form Validation with email , phone number and name.

Code

<!DOCTYPE html>
<html>
	<head>
		
		<style type="text/css">
			input{
				width: 250px !important;
			}
		</style>
	</head>
	
	<body>
		<form action="" method="post" onsubmit="return on_form_sbmt()">
			<input type="number" name="amount" id="id_amount" placeholder="Amount" min="500" max="2500" step="5" required><br/><br/>
			<input type="text" name="full_name" id="id_full_name" placeholder="Full Name"  required><br/><br/>
			<input type="text" name="company_name" id="id_company_name" placeholder="Company Name"  required><br/><br/>
			<input type="tel" name="phone_no" id="id_phone_no" placeholder="Phone No with country code or 0"  required><br/><br/>
			<input type="email" name="email" id="id_email"  placeholder="Email Address"  required><br/><br/>	
			<div id="txtHint" style="color: orange;"></div>
			<br/><br/>
			<input type="submit" name="form_submit" value="Submit The Form">
		</form>

var textHint = document.getElementById("txtHint");
                
                if (amount.value.length == 0 || parseInt(amount.value)<500 || parseInt(amount.value)>2500) {
                    textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Amount must be between 500 - 2500</p>";
                    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("");
                }

if (full_name.value.length < 2 || !/^[A-Za-z\s]+$/.test(full_name.value)) { 
                    textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Name Properly</p>";
                    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("");
                }

if (company_name.value.length == 0) { 
                    textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Company Name</p>";
                    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("");
                }

if (!/^\+?([0]{1})\)?([0-9]{9,10})$/.test(phone_no.value) && !/^\+?([91]{2})\)?([0-9]{9,10})$/.test(phone_no.value) ) { 
                    textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Ph No With +91 Or 0</p>";
                    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("");
                }

if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value)) { 
                    textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Email Id Properly</p>";
                    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("");
                }

return true;
            }
		</script>
	</body>
</html>

Try it yourself – JavaScript Form Validation with email , phone number and name.

Code

Result