Question

0

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

rated 0 times [ 7] [ 7] / answers: 1 / hits: 23684 / 14 Years ago, thu, july 8, 2010, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jailynbethanies

Add To Favorites

Follow

Total Points: 686

Total Questions: 119

Total Answers: 99

Location: Cook Islands

Member since Thu, May 21, 2020

4 Years ago

answered 14 Years ago devlin · Accepted Answer

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()

}