Control of empty fields in a form via JavaScript [closed]

It's okay to do the validations in the client side for a better user experience, so the user does not have to wait the response of the server or make a request to know if there is any field that he left incomplete. But you have to do the same validations on the server, because if someone makes a direct request to your server with empty fields, that request is not going through the javascript validations, so your application is going to crash.

You are re-inventing the wheel here. Form fields already have a property called required. As the name suggests, it forces a field to be properly filled out before the form can be submitted.

You can use it simply like this:

<input type="text" id="title" required />

However, if you read the docs, it says that it doesn't work for type="image". I don't know how you are receiving images in your HTML, so I can't help you with that.

Thanks for your answers. Something like that is enough?

include_once 'function/upload.php';

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

    if ($_POST['title'] != "") {
        $_POST['title'] = filter_var($_POST['title'], FILTER_SANITIZE_STRING);
        if ($_POST['title'] == "") {
            $errors .= 'Please enter a valid title.<br/><br/>';
        }
    } else {
        $errors .= 'Please enter your title.<br/>';
    }

    if ($_POST['description'] != "") {
        $_POST['description'] = filter_var($_POST['description'], FILTER_SANITIZE_STRING);
        if ($_POST['description'] == "") {
            $errors .= 'Please enter a description.<br/>';
        }
    } else {
        $errors .= 'Please enter a description.<br/>';
    }

    if (!$errors) {
        //call thumbnail creation function and store thumbnail name
        $upload_img = imgUpload('image','uploads/','',TRUE,'uploads/thumbs/','260','260');
        //full path of the thumbnail image
        $thumb_src = 'uploads/thumbs/'.$upload_img;
        echo "Success!<br/><br/>";
    } else {
        echo '<div style="color: red">' . $errors . '<br/></div>';
    }
}

Another improvement would be to create a single function and provide 2 parameters for field id and name since all of your methods do the same thing.

function validateField(fieldId, fieldName) {
    if(document.getElementById('title').value=="") {
        alert("Enter a " + fieldName);
        return false;
    }

    alert("Success");
    return true;
}