Validate form before submitting (more complicated than checking empty fields)

Question

I have a form containing input data for the time (in particular, the opening and closing times). when the submit button is clicked, it goes to the php page where these inputs are added to the database. I want to check a few things before allowing form submission. for example, I want to make sure that the start time is earlier (less) than the end time. here is 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 to validate individual form elements, but I cannot figure out how I could combine several without submitting. on 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 material after shipping does not make sense. I suggest that I could redirect to the original page if an error was found, but this does not seem to be effective.

, , , php , . , php, . ?

? , -, javascript, .

, , . , .

.

Answer 1

onSubmit() JavaScript, :

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

doSubmit() ( , )

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

, div Javascript , .

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

Answer 2

PHP , , , javascript.

javaScript Js, ​​ jQuery, plugin . .

PHP filter_var. .

Answer 3

Instead, translate the form data into a DateTime . This will greatly simplify the comparison, while each part will work individually. It also ensures that the DateTime string placed in the database is safe to insert because you get the string from the format () method .

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