2016-09-19 1 views
0

У меня есть этот код для проверки подлинности телефона. Но я пробовал все возможные вещи, не добился успеха. И мои проверки датпикера также не работают.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; 
    } 


      //email 


    if (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="images/.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

ли вы случайно включить реальный номер телефона там ? –

ответ

0

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

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

+0

Ты сделал мой день братом! .. Он работал так, как я хотел. Спасибо, тон! Спасибо Kool-Mind за ваш вклад :) – Sshank

+0

Но после того, как я сделаю tha, я обнаружил, что все мои другие проверки перестали работать !! .. почему? – Sshank

+0

@Sshank - Ваша проблема решена или нет? Позвольте мне знать, какая конкретная проверка не работает. – Chetan

0

использование ниже ParseInt

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

Dint work !! .. :( – Sshank

+0

ok, какое значение u test alert (phone), и дайте мне знать –

 Смежные вопросы

  • Нет связанных вопросов^_^