valider formulaire avant de soumettre (plus compliqué que de vérifier les champs vides)

Question

J'ai un formulaire contenant des entrées pour les temps (en particulier, un temps d'ouverture et de fermeture). Lorsque le bouton Soumettre est pressé, il va à une page PHP où ces entrées sont ajoutées à une base de données. je veux vérifier quelques choses avant de permettre le formulaire à soumettre. Par exemple, je veux m'assurer que l'heure de début est antérieure à (moins de) l'heure de fin. voici la forme:

  Opens: 
      <select name="starthour1"> 
       <option value="00">12</option> 
       <option value="01">1</option> 
       <option value="02">2</option> 
       <option value="03">3</option> 
       <option value="04">4</option> 
       <option value="05">5</option> 
       <option value="06">6</option> 
       <option value="07">7</option> 
       <option value="08">8</option> 
       <option value="09">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
      </select> : 
      <select name="startminute1"> 
       <option value="00">00</option> 
       <option value="15">15</option> 
       <option value="30">30</option> 
       <option value="45">45</option> 
       <option value="59">59</option> 
      </select> 
      <select name="startwhen1"> 
       <option value="am">am</option> 
       <option value="pm">pm</option> 
      </select> 

      Closes: 
      <select name="endhour1"> 
       <option value="00">12</option> 
       <option value="01">1</option> 
       <option value="02">2</option> 
       <option value="03">3</option> 
       <option value="04">4</option> 
       <option value="05">5</option> 
       <option value="06">6</option> 
       <option value="07">7</option> 
       <option value="08">8</option> 
       <option value="09">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
      </select> : 
      <select name="endminute1"> 
       <option value="00">00</option> 
       <option value="15">15</option> 
       <option value="30">30</option> 
       <option value="45">45</option> 
       <option value="59">59</option> 
      </select> 
      <select name="endwhen1"> 
       <option value="am">am</option> 
       <option value="pm">pm</option> 
      </select> 

i trouvé code javascript pour savoir comment vérifier les éléments de formulaire individuels, mais je ne peux pas comprendre comment je pouvais combiner plusieurs sans se soumettre. dans ma page php, j'ai le code suivant:

$starthour1=$_POST['starthour1']; 
$startminute1=$_POST['startminute1']; 
$startwhen1=$_POST['startwhen1']; 
$endhour1=$_POST['endhour1']; 
$endminute1=$_POST['endminute1']; 
$endwhen1=$_POST['endwhen1']; 

$start_time1=$end_time1=""; 

    if($startwhen1=="pm"){ 
     $starthour1=$starthour1+12; 
    } 
    if($endwhen1=="pm"){ 
     $endhour1=$endhour1+12; 
    } 
    $start_time1=$starthour1.":".$startminute1.":00"; 
    $end_time1=$endhour1.":".$endminute1.":00"; 
    if($end_time1=="00:00:00"){ 
     $end_time1="23:59:00"; 
    } 

echo "<br>start time is ".$start_time1; 
echo "<br>end time is ".$end_time1; 

$startnum=str_replace(":", "", $start_time1); 
$endnum=str_replace(":", "", $end_time1); 
if($endnum<$startnum){ 
    echo "<br>start time can't be later than end time!"; 
} 
else{ 
    //add to database 
} 

Cependant, vérifier ce truc après la soumission n'a pas de sens. Je suppose que je pourrais rediriger vers la page initiale si l'erreur a été trouvée, mais cela ne semble pas efficace.

aussi, je pensais peut-être que je pourrais avoir du php sur la page avec le formulaire qui vérifie la validité. Si elle valide, elle publie ensuite sur la page php qui insère des éléments dans la base de données. Est-ce que cela a du sens et est-ce possible?

Y a-t-il une meilleure solution? J'imagine qu'il y a quelque chose que je pourrais faire avec javascript mais je n'ai pas été en mesure de le comprendre.

En outre, je voudrais informer l'utilisateur des entrées invalides avec du texte qui apparaît à côté de la boîte de saisie. Je devrais être capable de comprendre cela une fois que le reste fonctionne bien.

merci.

Answer 1

Demandez au onSubmit() ou l'action de l'appel sous forme d'une fonction JavaScript, comme ceci:

<form id="form" onSubmit="return doSubmit();" action="#"> 

Puis, en doSubmit() vous pouvez réellement effectuer les validations (et seulement fait soumettre la forme si elles passent)

function doSubmit(){  
    if (validationsPass()) { 
     $('#form').submit(); 
    } 
} 

pour informer les utilisateurs des entrées invalides à côté du champ de formulaire réel, vous pouvez avoir divs cachés ou enjambe à côté de chaque champ et utiliser Javascript pour non les cacher si elles échouent un peu sorte de validation.

if(!fieldNotValid){ 
    $('#field-error').show(); //Or use effects like .highlight() 
} 

Answer 2

Toujours vérifier au niveau PHP l'entrée de l'utilisateur, peu importe si vous le contrôlez du côté client ainsi que javascript.

En javaScript, je vous recommande d'utiliser une bibliothèque Js comme jQuery qui a un plugin pour la validation de formulaire. Très utile et facile à mettre en œuvre. Au niveau PHP, je vous recommande d'utiliser filter_var fonctions. Très efficace aussi.

Answer 3

Envisagez plutôt de transformer les données de formulaire en objets DateTime. Cela rendra la comparaison beaucoup plus facile que de jouer avec chaque partie individuellement. Il s'assurera également que la chaîne DateTime placée dans la base de données est sûre pour l'insertion, car vous obtiendrez la chaîne de la méthode format().

Answer 4

merci pour l'aide!i fini par utiliser:

<form action="add.php" onsubmit="return validate_form()" method="POST" name="addform"> 

avec:

function validate_form(){ 
     var f = document.addform; 
     var start, end, starthour, endhour; 
     var valid=true; 
     .......... 

      starthour=f.starthour1.value; 
      endhour=f.endhour1.value; 
      if(f.startwhen1.value=="pm"){ 
       var starthournum = starthour * 1; 
       starthournum = starthournum+12; 
       starthour = starthournum.toString(); 
      } 
      if(f.endwhen1.value=="pm"){ 
       var endhournum = endhour * 1; 
       starthournum = starthournum+12; 
       starthour = starthournum.toString(); 
      } 
      start = starthour+f.startminute1.value; 
      end = endhour+f.endminute1.value; 

      if(end=="0000"){ 
       end="2359"; 
      } 

     if(end<start){ 
      alert("Start time can't be later than end time!"); 
      valid=false; 
     } 

     return valid; 
}