validate form before submitting (more complicated than checking for empty fields)

Question

i have a form containing inputs for times (specifically, an opening and closing time). when the submit button is pressed, it goes to a php page where these inputs are added to a database. i want to check a few things before allowing the form to submit. for example, i want to make sure that the start time is earlier than (less than) the end time. here's the form:

            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 found javascript code for how to check individual form elements, but i can't figure out how i could combine multiple without submitting. in my php page, i have the following code:

$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
}

however, checking this stuff after submitting doesn't make sense. i suppose i could redirect back to the initial page if the error was found, but that doesn't seem efficient.

also, i was thinking maybe i could have some php on the page with the form that checks for validity. if it validates, it then posts to the php page that inserts stuff into the database. does this make sense and is it possible?

is there a better solution? i imagine there is something i could do with javascript but i haven't been able to figure it out.

additionally i'd like to inform the user of invalid inputs with text that appears next to the input box. i should be able to figure this out once the rest is working though.

thanks.

Answer 1

Always check at PHP level the user input, no matter if you check it in the client side as well using javascript.

In javaScript I recommend you to use a Js library like jQuery that has a plugin for form validation. Very useful and easy to implement.

At PHP level I recommend you to use filter_var functions. Very efficient as well.

Answer 2

Consider turning the Form Data into DateTime objects instead. This will make comparison much easier than fiddling with each part individually. It will also make sure the DateTime string put into the database is safe for insertion, because you will get the string from the format() method.

Answer 3

Have the onSubmit() or action of the form call a JavaScript function, like this:

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

Then, in doSubmit() you can actually perform any of the validations (and only actually submit the form if they pass)

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

To inform users of invalid input next to the actual form field, you can have hidden divs or spans next to each field, and use Javascript to un-hide them if they fail some sort of validation.

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

Answer 4

thanks for the help! i ended up using:

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

with:

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;
}