0

I'm making an uploading system using php and I thought I would make an username blank space and an option for choosing an image. I already did an error message something like this, But the problem is, I want to make it more specific.

  <script>
var form = document.getElementById('FormID'); 
form.noValidate = true;
form.addEventListener('submit', function(event) { 
        if (!event.target.checkValidity()) {
            event.preventDefault(); 
            document.getElementById('errorMessageDiv').classList.remove("hidden");
        }
    }, false);


</script>

The div for it

  <div id="errorMessageDiv" class="hidden" >Please, Fill up the form</div>

The css

<style type = "text/css">
.hidden {
    display: none;
}
</style>

The problem is, I want to make it more specific. For example, For the username it would say "username required" and for choosing an image, "An image is required" If the user didn't choose or fill up the username. This is also my full form: 

<form method="post" enctype="multipart/form-data" id="FormID">
                <label>User Name</label>
                <input id = "name" type="text" name="user_name" class="form-control" required = "" >
                <label>Select image to upload</label>
                <input id = "image" type="file"  onchange ="unlock()" name="profile" class="form-control2" accept="*/image" required = "">
                <button type="submit" id="submit" name="btn-add">Upload</button>
                <div id="errorMessageDiv" class="hidden" >Please, Fill up the form</div>
            </form>

I'm making it for safari as well, So far I want to make the error messages in a div form.

Premlatha
  • 1,676
  • 2
  • 20
  • 40
Muhammad Nur Amjadh
  • 19
  • 3

1 Answers1

0

Along with this in script 

document.getElementById('errorMessageDiv').classList.remove("hidden");

You can edit the text based on the situation

errorMessage = validateForm();
document.getElementById('errorMessageDiv').innnerHTML = errorMessage;


function validateForm() {

    var form = document.getElementById("FormID");
    var inputs = form.getElementsByTagName("input");
    var fields = ["#name", "#image"];
    for(var i =0; i < fields.length ; i++){
        if(form.getElementById(fields[i]).value != "") 
            errorMessage = + errorMessage + fields[i];  
    } 
errorMessage = errorMessage + " is empty!";
return errorMessage;

}

Something similar as it suits your needs.

Your question is similar to (sorry can't comment)
HTML/Javascript change div content and this link
Check all elements in form with Javascript

Revati Mahajan
  • 23
  • 5