2012-07-16 4 views
1

Je valide un formulaire avec jquery et ayant quelques problèmes. code de validation jquery:validation de formulaire ne fonctionne pas correctement

$(function(){ 
    var form = $('#contactus'); 
    var name = $('#name'); 
    var nameInfo = $('#nameInfo'); 
    var email = $('#email'); 
    var emailInfo = $('#emailInfo'); 
    var phone = $('#phone'); 
    var phoneInfo = $('#phoneInfo'); 
    var msg = $('#message'); 
    var msgInfo = $('#messageInfo'); 
    var reg=/^[a-zA-Z. ]+$/; 
    var mail=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 





    function validateName() 
    { 
     if(name.val()=='') 
     { 
      name.addClass('error'); 
      nameInfo.text('Please fill up your full Name'); 
      nameInfo.addClass('error'); 
      return false; 
     }else if(reg.test(name)==false){ 
      name.addClass('error'); 
      nameInfo.text('Only letters are allowed'); 
      nameInfo.addClass('error'); 
      return false; 
     }else{ 
      name.removeClass('error'); 
      nameInfo.text(''); 
      nameInfo.removeClass('error'); 
      return true; 
     } 
    } 
    function validateEmail() 
    { 
     if(email.val()=='') 
     { 
      email.addClass('error'); 
      emailInfo.text('Please fill in your Valid Email'); 
      emailInfo.addClass('error'); 
      return false; 
     }else if(mail.test(email)==false){ 
      email.addClass('error'); 
      emailInfo.text('Invalid Email'); 
      emailInfo.addClass('error'); 
      return false; 
     }else{ 
      email.removeClass('error'); 
      emailInfo.removeClass('error'); 
      return true; 
     } 
    } 
    function validatePhone() 
    { 
     if(phone.val()=='') 
     { 
      phone.addClass('error'); 
      phoneInfo.text('Please fill in your Phone number'); 
      phoneInfo.addClass('error'); 
      return false; 
     }else if(isNaN(phone)){ 
      phone.addClass('error'); 
      phoneInfo.text('Please fill in your Phone number'); 
      phoneInfo.addClass('error'); 
      return false; 
     }else{ 
      phone.removeClass('error'); 
      phoneInfo.removeClass('error'); 
      return true; 
     } 
    } 
    function validateMsg(){ 
     if(msg.val()=='') 
     { 
      msg.addClass('error'); 
      msgInfo.text('Please enter your Message'); 
      msgInfo.addClass('error'); 
      return false; 
     }else if(msg.val().length<10){ 
      msg.addClass('error'); 
      msgInfo.text('Please enter at least 10 words'); 
      msgInfo.addClass('error'); 
      return false; 
     }else{ 
      msg.removeClass('error'); 
      msgInfo.removeClass('error'); 
      return true; 
     } 
    } 

    /*name.blur(validateName); 
    email.blur(validateEmail); 
    phone.blur(validatePhone); 
    msg.blur(validateMsg);*/ 

    name.keyup(validateName); 
    email.keyup(validateEmail); 
    phone.keyup(validatePhone); 
    msg.keyup(validateMsg); 

    form.submit(function(){ 
     if(validateName() ,validateEmail() , validatePhone(), validateMsg()){ 
      return true; 
     }else{ 
      return false; 
     } 
    }) 
}) 

et code de formulaire php est:

<form name="contactus" id="contactus" action="" method="post"> 
     <ul class="form_field"> 
      <li><label>Your Name :</label> 
       <input class="form_input" type="text" name="name" id="name" value="<?php echo $_POST['name'];?>" /> 
       <span id="nameInfo"></span> 
      </li> 
      <li><label>Email Address :</label> 
       <input class="form_input" type="text" name="email" id="email" value="<?php echo $_POST['email'];?>" /> 
       <span id="emailInfo"></span> 
      </li> 
      <li><label>Phone Number :</label> 
       <input class="form_input" type="text" name="phone" id="phone" value="<?php echo $_POST['phone'];?>" /> 
       <span id="phoneInfo"></span> 
      </li> 
      <li><label>Your Message:</label> 
       <textarea class="form_input" name="message" id="message"><?php echo $_POST['message'];?></textarea> 
       <span id="messageInfo"></span> 
      </li> 
      <li><?php echo recaptcha(); ?></li> 
      <li><label>&nbsp;</label><input type="submit" class="submit_btn" value="Submit" name="submit"/></li> 
     </ul> 
    </form> 
problème est

deuxième condition ne soit pas validé correctement pour l'un des éléments de forme. Bien que la condition nulle soit satisfaite, la deuxième condition ne l'est pas. Suis-je en train de faire un mauvais.tout aide/suggestions est la bienvenue. Merci beaucoup.

+0

'var reg =/^ [a-zA-Z. ] + $ /; 'devrait être' var reg =/^ [a-zA-Z] + $ /; ' –

+0

hab déjà essayé, mais en vain .. :( –

+0

Voyez-vous des erreurs sur la console? –

Répondre

0

je ne veux pas de caractère numérique en mon nom et que pour l'émission de courrier électronique valide je veux [email protected] comme email valide et non quelque chose comme [email protected]_xxx.co ou quelque chose comme ça

var reg=/^[a-zA-Z]+$/; 
var mail=/^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/; 

modifier également vos fonctions à

function validateName() 
{ 
    var val=name.val(); 
    if(!reg.test(val)) 
    { 
     if(val.length > 0) nameInfo.text('Only letters are allowed'); 
     else nameInfo.text('Please fill up your full Name'); 
     name.addClass('error'); 
     nameInfo.addClass('error'); 
     return false; 
    } 
    else 
    { 
     name.removeClass('error'); 
     nameInfo.text(''); 
     nameInfo.removeClass('error'); 
     return true; 
    } 
} 

function validateEmail() 
{ 
    var val=email.val(); 
    if(!mail.test(val)) 
    { 
     if(val.length > 0) emailInfo.text('Invalid Email'); 
     else emailInfo.text('Please fill in your Valid Email'); 
     email.addClass('error'); 
     emailInfo.addClass('error'); 
     return false; 
    } 
    else 
    { 
     email.removeClass('error'); 
     emailInfo.removeClass('error'); 
     return true; 
    } 
} 

également dans votre validatePhone() function changement

else if(isNaN(phone)); 

à

else if(isNaN(phone.val())); 

Here is a test of regular Expression.

+0

merci @ Sheikh Heera .... tout droit maintenant mais je suis toujours confus pourquoi mon code précédent ne fonctionnait pas. Pouvez-vous me rendre clair et oui "! val.test (reg)" a renvoyé l'erreur car val.test n'est pas une fonction et pour la corriger j'ai utilisé "! reg.test (val)". ça a marché. donc je suis confus pourquoi votre code n'a pas fonctionné pour moi. avez-vous une idée et merci MERCI pour la solution. –

+0

Une erreur courante que vous avez faite 'reg.test (nom)' nom est la référence de la boîte d'entrée qui est un objet mais pas la valeur de cette boîte d'entrée. –

+1

oh si simple une erreur et je ne comprenais pas. merci beaucoup @ Sheikh Heera –

0

code correct pour ma question:

$(function(){ 

    var form = $('#contactus'); 
    var name = $('#name'); 
    var nameInfo = $('#nameInfo'); 
    var email = $('#email'); 
    var emailInfo = $('#emailInfo'); 
    var phone = $('#phone'); 
    var phoneInfo = $('#phoneInfo'); 
    var msg = $('#message'); 
    var msgInfo = $('#messageInfo'); 
    var reg=/^[a-zA-Z. ]+$/; 
    var mail=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 





    function validateName() 
    { 
     if(name.val()=='') 
     { 
      name.addClass('error'); 
      nameInfo.text('Please fill up your full Name'); 
      nameInfo.addClass('error'); 
      return false; 
     }else if(!reg.test(name.val())){ 
      name.addClass('error'); 
      nameInfo.text('Only letters are allowed'); 
      nameInfo.addClass('error'); 
      return false; 
     }else{ 
      name.removeClass('error'); 
      nameInfo.text(''); 
      nameInfo.removeClass('error'); 
      return true; 
     } 
    } 
    function validateEmail() 
    { 
     if(email.val()=='') 
     { 
      email.addClass('error'); 
      emailInfo.text('Please fill in your Valid Email'); 
      emailInfo.addClass('error'); 
      return false; 
     }else if(!mail.test(email.val())){ 
      email.addClass('error'); 
      emailInfo.text('Invalid Email'); 
      emailInfo.addClass('error'); 
      return false; 
     }else{ 
      email.removeClass('error'); 
      emailInfo.text(""); 
      emailInfo.removeClass('error'); 
      return true; 
     } 
    } 
    function validatePhone() 
    { 
     if(phone.val()=='') 
     { 
      phone.addClass('error'); 
      phoneInfo.text('Please fill in your Phone number'); 
      phoneInfo.addClass('error'); 
      return false; 
     }else if(isNaN(phone.val())){ 
      phone.addClass('error'); 
      phoneInfo.text('Please fill in your correct number'); 
      phoneInfo.addClass('error'); 
      return false; 
     }else{ 
      phone.removeClass('error'); 
      phoneInfo.text(""); 
      phoneInfo.removeClass('error'); 
      return true; 
     } 
    } 
    function validateMsg(){ 
     if(msg.val()=='') 
     { 
      msg.addClass('error'); 
      msgInfo.text('Please enter your Message'); 
      msgInfo.addClass('error'); 
      return false; 
     }else if(msg.val().length<10){ 
      msg.addClass('error'); 
      msgInfo.text('Please enter at least 10 words'); 
      msgInfo.addClass('error'); 
      return false; 
     }else{ 
      msg.removeClass('error'); 
      msgInfo.text(""); 
      msgInfo.removeClass('error'); 
      return true; 
     } 
    } 

    name.blur(validateName); 
    email.blur(validateEmail); 
    phone.blur(validatePhone); 
    msg.blur(validateMsg); 

    name.keyup(validateName); 
    email.keyup(validateEmail); 
    phone.keyup(validatePhone); 
    msg.keyup(validateMsg); 

    form.submit(function(){ 
     if(validateName() ,validateEmail() , validatePhone(), validateMsg()){ 
      return true; 
     }else{ 
      return false; 
     } 
    }) 
}) 
Questions connexes