проверить форму перед отправкой (сложнее, чем проверка пустых полей)

Question

У меня есть форма, содержащая входные данные для времени (в частности, время открытия и закрытия).когда кнопка отправки нажата, она переходит на страницу php, где эти входы добавляются в базу данных.Я хочу проверить несколько вещей, прежде чем разрешить отправлять форму.например, я хочу убедиться, что время начала раньше (меньше) времени окончания.Вот форма:

            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>

Я нашел javascript код для проверки отдельных элементов формы, но я не могу понять, как я могу объединить несколько без отправки.на моей странице php у меня есть следующий код:

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

однако, проверка этого материала после отправки не имеет смысла.Я полагаю, я мог бы перенаправить обратно на начальную страницу, если ошибка была найдена, но это не кажется эффективным.

Кроме того, я подумал, может быть, я мог бы иметь некоторые 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, которая имеет плагин для проверки формы.Очень полезный и простой в реализации.

На уровне PHP я рекомендую вам использовать filter_var функции.Также очень эффективно.

Answer 3

Рассмотрите возможность преобразования данных формы в DateTime объекты. Это сделает сравнение намного проще, чем возиться с каждой частью в отдельности. Это также гарантирует, что строка DateTime, помещенная в базу данных, безопасна для вставки, поскольку вы получите строку из метода format () .

Answer 4

спасибо за помощь!я закончил, используя:

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

с:

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