How to display javascript error in form?

Question

I have a website where you can upload news stories. Once the news is uploaded you can edit it. The issue is that when you edit the DATE form, it automatically displays it to "0000-00-00" on default.

So when I enter "blacklivesmatter" on the date form it should display a javascript error stating that "Date should be entered with YEAR-MONTH-DAY format only"

Here is how I think the code should look like for the error:

echo "<script language='javascript'> alert('Date should be entered with YEAR-MONTH-DAY format only'); window.location='editnews.php'; </script>";

Here is the code for the PHP page:

<?php
if(isset($_GET['id']))
{
    $id = $_GET['id'];
    $query = mysqli_query($con,"select * from news where ID = '$id'");
    $re = mysqli_fetch_array($query);
}
?>

<form method="post" action="editnews_action.php">
<h3><b><u>Title:</b><input type="text" name="title" value="<?php echo $re['Title']; ?>"/><input type="hidden" name="id" value="<?php echo $re['ID']; ?>"/></h3>
<h3><b><u>Detail:</b><input type="text" name="desc" value="<?php echo $re['story']; ?>"/></h3>
<h3><b><u>Date:</b><input type="text" name="date" value="<?php echo $re['DATE']; ?>"/></h3>
<center>
<br>
<input type="submit" value="Submit" name="submit">
</form>

Here is the action page:

<?php require 'connect.php'; ?>
<?php
session_start(); 
if(isset($_POST['submit'])) {

    $id = $_POST['id'];
    $title=$_POST['title'];
    $date= $_POST['date'];
    $story=$_POST['desc']; 

    $q = mysqli_query($con,"update news set Title = '$title', story = '$story', DATE = '$date' where ID = '$id'");
    if($q)
    {
        header("Location: adminside.php");
    }

}
?>

Where should I put the javascript error at?

You can easily find a regular expression on the internet that fullfills whatever format you're going for. If run that regex on field change and if it's invalid, you can then surface an alert or some other way to the user. A better option would be to use a date picker from something like jquery-ui that has date validation already baked into it. https://jqueryui.com/datepicker/ — mwilson, Jul 13 '16 at 02:17
there is few ways to do this, depends on how you want to do it, it can be done via, javascript: http://www.the-art-of-web.com/javascript/validate-date/, php: http://php.net/manual/en/function.checkdate.php there is more :) — Jah, Jul 13 '16 at 02:21

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You've got a couple of options to validate a date in javascript:

1.) new Date("date string") will return 'Invalid Date' if it's invalid. You can check for this and display the error how you wish

function isDateValid(date) {
    var theDate = new Date(date);
    return theDate;
}

Not the best option. new Date(1) for example will return a valid date. 'Invalid Date' will only be thrown if something like new Date('test') is entered

2.) Use a datepicker offered by bootstrap or jquery or some other library. Normally these date pickers will already have date validation in it so you don't have to worry about it. This also gives the user a better interface to picking dates.

this is the best option in my opinion. Most of the date pickers will also have configurable options so you can make the validation more flexable and some even have build in error messages so that part will also be taken care of for you

3.) Use a regex to run against the entered date. You can find many different regular expressions out there that validate all kinds of different formats. One site to look into is regexlib.com

var dateReg = /^\d{2}([./-])\d{2}\1\d{4}$/

"22-03-1981".match(dateReg) // matches
"22.03-1981".match(dateReg) // does not match
"22.03.1981".match(dateReg) // matches

This is a good option.

Javascript - Regex to validate date format

Javascript date regex DD/MM/YYYY

Regex for Date Validation in javascript

score 0 · Answer 2 · answered Jul 13 '16 at 02:32

someting simple as this could work

session_start(); 
if(isset($_POST['submit'])) {

    $id = $_POST['id'];
    $title=$_POST['title'];
    $date= $_POST['date'];
    $story=$_POST['desc']; 

if (validateDate($date)) {
        $q = mysqli_query($con,"update news set Title = '$title', story = '$story', DATE = '$date' where ID = '$id'");

        if($q)
        {
            header("Location: adminside.php");
        }

    }else{
    /*
    * show error if date not valid
    */
        echo "<script language='javascript'> alert('Date should be entered with YEAR-MONTH-DAY format only'); window.location='editnews.php'; </script>";
    }
}

/* * function to validate date */ function validateDate($date, $format = 'Y-m-d') { $d = DateTime::createFromFormat($format, $date); return $d && $d->format($format) == $date; }

How to display javascript error in form?

2 Answers2