2012-12-03 2 views
0

J'essaie de valider certains champs de formulaire en utilisant des fonctions JS, mais ils ne semblent pas charger ou vérifier le champ lorsque le bouton Soumettre est cliqué.La validation de formulaire JS ne fonctionne pas

<html> 
    <body> 
    <?php require_once('logic.php'); ?> 
    <h1>Add new Region/Entity</h1> 
    <?php 
     if ($_POST['submitted']==1) { 
     echo $error; 
     } 
    ?> 
    <form action="logic.php" method="post" name="registration" onSubmit="return formValidation();"> 
     Region: <input type="text" name="region" value="<?php echo @$_POST['region']; ?>"><br> 
     Description: <br><textarea name="description" cols="50" rows="10"><?php echo @$_POST['description']; ?></textarea><br> 
     Remarks: <input type="text" name="remarks" value="<?php echo @$_POST['remarks']; ?>"> 
     <input type="hidden" name="submitted" value="1"><br> 
     <input type="submit" value="Submit" onclick=""> 

Et voici la JS:

<script type="text/javascript"> 
    function formValidation() { 
    var region = document.registration.region; 
    var descr = document.registration.description; 
    var remarks = document.registration.remarks; 
    if(empty_validation()) { 
     if(reg_validation()) { 
     if(reg_letters()) { 
      if (desc_letters()) { 
      if (desc_validation()) { 

      } 
      } 
     } 
     } 
    } 
    return false; 
    } 
    function empty_validation() { 
    var reg_len = region.value.length; 
    var descr_len = descr.value.length; 
    var rem_len = remarks.value.length; 
    if (reg_len == 0 || decr_len == 0 || rem_len == 0) { 
     alert("Please fill all the fields"); 
     return false; 
    } 
    return true; 
    } 
    function reg_validation() { 
    if (reg_len > 50) { 
     alert("Only 50 characters are allowed in the Region field"); 
     region.focus(); 
     return false; 
    } 
    return true; 
    } 
    function reg_letters() { 
    var letters = /^[A-Za-z]+$/; 
    if(region.value.match(letters)) { 
     return true; 
    } else { 
     alert('Region field must have only alphabetical characters'); 
     region.focus(); 
     return false; 
    } 
    } 
    function desc_validation() { 
    if (descr_len > 500) { 
     alert("Only 500 characters are allowed in the description field"); 
     descr.focus(); 
     return false; 
    } 
    return true; 
    } 
    function desc_letters() { 
    var iChars = "[email protected]#$%^&*()+=-[]\\\';,./{}|\":<>?"; 
    for (var i = 0; i < descr_len; i++) { 
     if (iChars.indexOf(descr.value.charAt(i)) != -1) { 
     alert ("Your description has special characters. \nThese are not allowed.\n Please remove them and try again."); 
     return false; 
     } 
    } 
    return true; 
    } 
</script> 
</form> 
</body> 
</html> 

Comme vous pouvez le voir, j'affichage des valeurs de la forme à un fichier PHP. Et j'ai utilisé l'événement onSubmit dans la balise de formulaire pour initialiser la fonction formValidation(). Cela ne fonctionne pas pour une raison quelconque.

est ici a working example si vous en avez besoin.

+0

Avez-vous essayé le débogage? Il y a une erreur dans votre validation - "région n'est pas définie": 'var reg_len = region.value.length;' – Ian

+0

Ça ne marche pas! Ça n'aide pas. Qu'est-ce qui est attendu? Qu'est-ce qui se passe? –

+0

Vous ne pouvez pas déclarer de variables Javascript dans une fonction et attendre ensuite qu'elles soient disponibles dans chaque fonction. Vous devez les déclarer dans chaque fonction afin de les utiliser. – Ian

Répondre

1

Je ne vais pas corriger toutes les petites erreurs que vous avez, mais le principal problème est que les variables ne sont pas définies où vous les attendez d'être. Vous ne pouvez pas déclarer une variable dans une fonction et attendre qu'elle soit disponible dans la suivante (sans la passer en paramètre ou la déclarer globalement). Par exemple, votre fonction empty_validation devrait être ceci:

function empty_validation(region, descr, remarks) { 
    var reg_len = region.value.length; 
    var descr_len = descr.value.length; 
    var rem_len = remarks.value.length; 

    if (reg_len == 0 || decr_len == 0 || rem_len == 0) { 
     alert("Please fill all the fields"); 
     return false; 
    } 
    return true; 
} 

Et dans votre fonction formValidation, vous l'appelez comme ceci:

if(empty_validation(region, descr, remarks)) { 

Ceci est juste un exemple, et vous auriez besoin de le faire en quelques endroits.

Quelques autres choses - vous revenez toujours false de formValidation ... avez-vous dire de mettre return true; dans l'instruction if plus à l'intérieur? De plus, comme tout ce que vous semblez faire est d'appeler chacune de ces fonctions, vous pouvez probablement les mettre dans une grande déclaration if, comme ceci:

if (empty_validation() && reg_validation() && reg_letters() && desc_letters() && desc_validation()) { 
    return true; 
} 
return false; 
+0

Merci, ça m'a aidé. http://appinventr.com/Task/interface.php Pendant que la première validation fonctionne (en quelque sorte, lorsque l'alerte est affichée lorsqu'un champ est laissé vide), cela ne semble pas fonctionner après avoir ignoré l'alerte. J'ai modifié le code et inclus les variables comme vous avez suggéré, il est en direct sur ce lien – 17andLearning

+0

@ AnimeshTripathi Êtes-vous capable de déboguer cela? Par exemple, en utilisant Firebug ou Developer Tools pour regarder ce qui se passe dans la console du navigateur? Quoi qu'il en soit, la nouvelle erreur est "decr_len n'est pas défini" ici: 'if (reg_len == 0 || decr_len == 0 || rem_len == 0)'. Vous semblez confondrez noms de variables - entre '' decr_len' et descr_len' – Ian

+0

@AnimeshTripathi Et pour 'desc_validation' fonction, vous définissez le paramètre comme' deacr', mais l'utiliser comme 'descr' – Ian

Questions connexes