Проверка телефона Javascript не работает

Question

Проверка телефона Javascript не работает

У меня есть этот код JavaScript для проверки для телефона. Но я перепробовал все возможные вещи, но безуспешно. И мои проверки даты выбора также не работают.

Вот мой фрагмент кода

 <html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/><style>
.parallax img{
display: inherit !important;
}
input#proceed{
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:5px 25px; /*add some padding to the inside of the button*/
background:#35b128; /*the colour of the button*/
border:1px solid #33842a; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
}
/***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
input#gobutton:hover, input#gobutton:focus{
background-color :#399630; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}

body{
background:url("back.jpg");
background-size: cover;       /* For flexibility */
font-family: 'Baloo Chettan', cursive;
}</style>

</head>

<body>
<script>
function validateForm()
{
var phone = document["form"]["phone"].value;
var email = document["form"]["email"].value;
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
var birthdate = document["form"]["birthdate"].value;
var letters = /^[A-Za-z]+$/;

if(first_name.value.match(letters) && last_name.value.match(letters) && state.value.match(letters) && city.value.match(letters) )
{
return true;
}
else
{
alert("Enter text");
return false;
}

if(birthdate.value == "")
{
alert("Please Enter the Expected date to join ");
document.form.birthdate.focus();
return false;
}

if(phone=="")
{
alert("please Enter the Contact Number");
document.form.phone.focus();
return false;
}
if(isNaN(phone))
{
alert("Enter the valid Mobile Number(Like : 5555555555)");
document.form.phone.focus();
return false;
}
if((phone.length != 10))
{
alert(" Your number is invalid");
document.form.phone.select();
return false;
}//emailif (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
alert("Not a valid e-mail address");
return false;
}
}

</script>

<div class = "navbar-fixed">
<nav class="white">
<div class="nav-wrapper">
<a href="index.html" class="brand-logo center"><image src = "logosample.png" width="170px" height="55px" style = "padding-top : 2px;"/></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons" style = "color:indigo;">menu</i></a>
<ul class="right hide-on-med-and-down" >
<li><a href="gallery.html" style = "color:indigo ;"><i class="material-icons right">supervisor_account</i>Gallery</a></li>
<li><a href="contact.html" style = "color:indigo ;"><i class="material-icons right">phone</i>Contact Us</a></li>
</ul>
<ul class="side-nav" id="mobile-demo" style = "color:white;">
<li><a href="index.html" style = "color:indigo ;">Home</a></li>
<li><a href="gallery.html" style = "color:indigo ;">Gallery</a></li>
<li><a href="contact.html" style = "color:indigo ;">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
<!--Parallex starts here-->

<div class="parallax-container">
<div class="parallax"><img src="https://web-answers.ru/wp-content/uploads/2019/02/.jpg"></div>
</div>
<!--<h1>Hello Materialize</h1>-->
<section>
<center>
<h1>Enquiry Form</h1>
</center>
<div class="row container">
<form class="col s12" action="iihtinsertc.php" method = "POST" name='form' onsubmit="return validateForm()">
<div class="row">
<div class="input-field col s12">
<input id="first_name" type="text" name = "firstname" class="validate" required>
<label for="first_name">First Name</label>
</div>
</div>

<div class="row">
<div class="input-field col s12">
<input id="last_name" type="text" name = "lastname" class="validate" required>
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" name = "email" class="validate" required>
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="phone" type="text" name = "phone" class="validate" required>
<label for="phone">Phone Number</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="Cloud" id="disabled" name = "android" type="text" class="validate">
<label for="disabled">Course</label>
</div>
</div>

<div class="row">
<div class="input-field col s12">
<input id="state" type="text" name = "state" class="validate" required>
<label for="state">State</label>
</div>
</div>

<div class="row">
<div class="input-field col s12">
<input id="city" type="text" name = "city" class="validate" required>
<label for="city">City</label>
</div>
</div>

<div class="row">
<div class="input-field col s12">
<input disabled value="Goa Center" id="disabled" type="text" name = "center" class="validate">
<label for="disabled">Center</label>
</div>
</div>

<div class="row">
<div class="col s12">
<label for="birthdate">Expected to Join</label>
<input type="text" id="birthdate" name = "exptj" class="datepicker" required>
</div>

</div>

<!--<div class = "row">
<a class="waves-effect waves-light btn" href = ""><i class="material-icons right">send</i>Submit</a>
</div>-->

<input id= "proceed" type="submit" value = "Submit" name = "submit"/></form>
</div>
</section>

<!--Footer --><footer class="page-footer indigo">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are Asia's No 1 hardware and software institute. With amazing infrastructure and trained IIHT Trainers we help our students acheive their goal. </p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Quick Links</h5>
<ul>
<li><a class="white-text" href="gallery.html"><i class="material-icons">arrow_right</i>Gallery</a></li>
<li><a class="white-text" href="contact.html"><i class="material-icons">arrow_right</i>Contact Us</a></li>

</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="http://www.facebook.com/iihtgoa"><i class="material-icons">thumb_up</i>Facebook</a></li>
<li><a class="white-text" href="http://www.iiht.com"><i class="material-icons">language</i>Website</a></li>

</ul>
</div>
</div>
</div>
</footer>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script><script>

$('.datepicker').pickadate({
min: new Date(2016,8,19),
max: new Date(2016,10,27),
format: 'dddd, dd mmm, yyyy',
formatSubmit: 'yyyy-mm-dd',
hiddenPrefix: 'prefix__',
hiddenSuffix: '__suffix'

});
</script>
<script>
$(document).ready(function() {
$('.parallax').parallax();});</script>

</body>
</html>

0

javascript materialize php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Атрибут шаблона пользователя вместо —

<form id="form">
<input type="tel" pattern="[0-9]{10}">
<input type="submit">
</form>

0

Другие решения

используйте ниже parseInt

if(parseInt(phone) != phone)
{
alert("Enter the valid Mobile Number(Like : 9566137117)");
document.form.phone.focus();
return false;
}

0

Источник