I'm working on a web form with several fields and a submit button. When the button is clicked, I have to verify that the required text boxes have been filled in and that the phone number is in the correct format. I can only accept 7 or 10 digit phone numbers, but characters such as (,), (-), etc are acceptable. If this box is empty or the phone number isn't in the correct format (not 7 or 10 numbers long, not a number) or has been left blank, I have to add a red border around the text box. This border is supposed to remain in place until the user corrects the error.
I can't get this to work properly. I have tried several different ways to go about doing this, but have gotten several different types of errors. One way seemed to work, but the red border only displayed for a second and then disappeared and the value in the textbox was reset.
Here is my code and a link to a jsfiddle I've created:
Javascript:
<script type="text/javascript">
function validateForm() {
return checkPhone();
}
function checkPhone() {
var phone = document.forms["myForm"]["phone"].value;
var phoneNum = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(phone.value.match(phoneNum)) {
return true;
}
else {
document.getElementById("phone").className = document.getElementById("phone").className + " error";
return false;
}
}
</script>
HTML:
<form name="myForm" onsubmit = "return validateForm()">
Phone Number: <input type="text" id="phone"><br>
</form>
JSFiddle:
This question is related to
javascript
html
validation
phone-number
Having seen simply too many edge cases, I went for a simpler check:
^(([0-9\ \+\_\-\,\.\^\*\?\$\^\#\(\)])|(ext|x)){1,20}$
The first thing one may point out is allowing repetition of "ext", but the purpose of this regex is to prevent users from accidentally entering email ids etc. instead of phone numbers, which it does.
<html>
<title>Practice Session</title>
<body>
<form name="RegForm" onsubmit="return validate()" method="post">
<p>Name: <input type="text" name="Name"> </p><br>
<p>Contact: <input type="text" name="Telephone"> </p><br>
<p><input type="submit" value="send" name="Submit"></p>
</form>
</body>
<script>
function validate()
{
var name = document.forms["RegForm"]["Name"];
var phone = document.forms["RegForm"]["Telephone"];
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}
else if(isNaN(name.value) /*"%d[10]"*/)
{
alert("name confirmed");
}
else{
window.alert("please enter character");
}
if (phone.value == "")
{
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}
else if(!isNaN(phone.value) /*phone.value == isNaN(phone.value)*/)
{
alert("number confirmed");
}
else{
window.alert("please enter numbers only");
}
}
</script>
</html>
function telephoneCheck(str) {_x000D_
var a = /^(1\s|1|)?((\(\d{3}\))|\d{3})(\-|\s)?(\d{3})(\-|\s)?(\d{4})$/.test(str);_x000D_
alert(a);_x000D_
}_x000D_
telephoneCheck("(555) 555-5555");
_x000D_
Where str could be any of these formats: 555-555-5555 (555)555-5555 (555) 555-5555 555 555 5555 5555555555 1 555 555 5555
To validate Phone number using regular expression in java script.
In india phone is 10 digit and starting digits are 6,7,8 and 9.
Javascript and HTML code:
function validate()
{
var text = document.getElementById("pno").value;
var regx = /^[6-9]\d{9}$/ ;
if(regx.test(text))
alert("valid");
else
alert("invalid");
}
_x000D_
<html>
<head>
<title>JS compiler - knox97</title>
</head>
<body>
<input id="pno" placeholder="phonenumber" type="tel" maxlength="10" >
</br></br>
<button onclick="validate()" type="button">submit</button>
</body>
</html>
_x000D_
Try this I It's working.
<form>_x000D_
<input type="text" name="mobile" pattern="[1-9]{1}[0-9]{9}" title="Enter 10 digit mobile number" placeholder="Mobile number" required>_x000D_
<button>_x000D_
Save_x000D_
</button>_x000D_
</form>_x000D_
_x000D_
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Homepage-30-06-2016/Css.css" >
<title>Form</title>
<script type="text/javascript">
function isChar(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 47 && charCode < 58) {
document.getElementById("error").innerHTML = "*Please Enter Your Name Only";
document.getElementById("fullname").focus();
document.getElementById("fullname").style.borderColor = 'red';
return false;
}
else {
document.getElementById("error").innerHTML = "";
document.getElementById("fullname").style.borderColor = '';
return true;
}
}
</script>
</head>
<body>
<h1 style="margin-left:20px;"Registration Form>Registration Form</h1><hr/>
Name: <input id="fullname" type="text" placeholder="Full Name*"
name="fullname" onKeyPress="return isChar(event)" onChange="return isChar(event);"/><label id="error"></label><br /><br />
<button type="submit" id="submit" name="submit" onClick="return valid(event)" class="btn btn-link text-uppercase"> Submit now</button>
<!DOCTYPE html>
<html>
<head>
<style>
.container__1{
max-width: 450px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.container__1 label{
display: block;
margin-bottom: 10px;
}
.container__1 label > span{
float: left;
width: 100px;
color: #F072A9;
font-weight: bold;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
}
.container__1 fieldset{
border-radius: 10px;
-webkit-border-radious:10px;
-moz-border-radoius: 10px;
margin: 0px 0px 0px 0px;
border: 1px solid #FFD2D2;
padding: 20px;
background:#FFF4F4 ;
box-shadow: inset 0px 0px 15px #FFE5E5;
}
.container__1 fieldset legend{
color: #FFA0C9;
border-top: 1px solid #FFD2D2 ;
border-left: 1px solid #FFD2D2 ;
border-right: 1px solid #FFD2D2 ;
border-radius: 5px 5px 0px 0px;
background: #FFF4F4;
padding: 0px 8px 3px 8px;
box-shadow: -0px -1px 2px #F1F1F1;
font-weight: normal;
font-size: 12px;
}
.container__1 textarea{
width: 250px;
height: 100px;
}.container__1 input[type=text],
.container__1 input[type=email],
.container__1 select{
border-radius: 3px;
border: 1px solid #FFC2DC;
outline: none;
color: #F072A9;
padding: 5px 8px 5px 8px;
box-shadow: inset 1px 1px 4px #FFD5E7;
background: #FFEFF6;
}
.container__1 input[type=submit],
.container__1 input[type=button]{
background: #EB3B88;
border: 1px solid #C94A81;
padding: 5px 15px 5px 15px;
color: #FFCBE2;
box-shadow: inset -1px -1px 3px #FF62A7;
border-radius: 3px;
font-weight: bold;
}
.required{
color: red;
}
</style>
</head>
<body>
<div class="container__1">
<form name="RegisterForm" onsubmit="return(SubmitClick())">
<fieldset>
<legend>Personal</legend>
<label for="field1"><span >Name<span class="required">*</span><input id="name" type="text" class="input-field" name="Name" value=""</label>
<label for="field2"><span >Email<span class="required">*</span><input placeholder="Ex: [email protected]" id="email" type="email" class="input-field" name="Email" value=""</label>
<label for="field3"><span >Phone<span class="required">*</span><input placeholder="+919853004369" id="mobile" type="text" class="input-field" name="Mobile" value=""</label>
<label for="field4">
<span>Subject</span>
<select name="subject" id="subject" class="select-field">
<option value="none">Choose Your Sub..</option>
<option value="Appointment">Appiontment</option>
<option value="Interview">Interview</option>
<option value="Regarding a post">Regarding a post</option>
</select>
</label>
<label><span></span><input type="submit" ></label>
</fieldset>
</form>
</div>
</body>
<script>
function SubmitClick(){
_name = document.querySelector('#name').value;
_email = document.querySelector('#email').value;
_mobile = document.querySelector('#mobile').value;
_subject = document.querySelector('#subject').value;
if(_name == '' || _name == null ){
alert('Enter Your Name');
document.RegisterForm.Name.focus();
return false;
}
var atPos = _email.indexOf('@');
var dotPos = _email.lastIndexOf('.');
if(_email == '' || atPos<1 || (dotPos - atPos)<2){
alert('Provide Your Correct Email address');
document.RegisterForm.Email.focus();
return false;
}
var regExp = /^\+91[0-9]{10}$/;
if(_mobile == '' || !regExp.test(_mobile)){
alert('Please Provide your Mobile number as Ex:- +919853004369');
document.RegisterForm.Mobile.focus();
return false;
}
if(_subject == 'none'){
alert('Please choose a subject');
document.RegisterForm.subject.focus();
return false;
}else{
alert (`success!!!:--'\n'Name:${_name},'\n' Mobile: ${_mobile},'\n' Email:${_email},'\n' Subject:${_subject},`)
}
}
</script>
</html>
if (charCode > 47 && charCode < 58) {
document.getElementById("error").innerHTML = "*Please Enter Your Name Only";
document.getElementById("fullname").focus();
document.getElementById("fullname").style.borderColor = 'red';
return false;
} else {
document.getElementById("error").innerHTML = "";
document.getElementById("fullname").style.borderColor = '';
return true;
}
Source: Stackoverflow.com